标签：width rip body idt form 分享 abs 技术 back
1、动画效果
===》
===》》》
<style> .star { position: absolute; width: 80px; height: 80px; } .point { position: absolute; left: 0; top: 0; bottom: 0; right: 0; margin: auto; width: 10px; height: 10px; background: transparent; background-clip: padding-box; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .star .point-dot { z-index: 1; background-color: #74E0F1; border: 1px solid #74E0F1; } .pa-10 { width: 100%; height: 100%; } .star .pa-10:after { position: absolute; content: ‘‘; display: block; left: 0; bottom: 0; top: 0; right: 0; margin: auto; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; opacity: 0; border: 2px solid #74E0F1; -webkit-animation: ripple 3s linear 0ms infinite; -moz-animation: ripple 3s linear 0ms infinite; -o-animation: ripple 3s linear 0ms infinite; animation: ripple 3s linear 0ms infinite; } .star .pa-20:after { position: absolute; content: ‘‘; display: block; left: 0; bottom: 0; top: 0; right: 0; margin: auto; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; opacity: 0; border: 2px solid #74E0F1; -webkit-animation: ripple 3s linear 1.5s infinite; -moz-animation: ripple 3s linear 1.5s infinite; -o-animation: ripple 3s linear 1.5s infinite; animation: ripple 3s linear 1.5s infinite; } @keyframes ripple { 0% {transform: scale(0);opacity:0;} 70% {transform: scale(0.7);opacity:1;} 100% {transform: scale(1);opacity:0;} }} } </style> </head> <body> <span class="star"> <i class="point point-dot"></i> <i class="pa-10 point"></i> <i class="pa-20 point"></i> </span> </body>
标签：width rip body idt form 分享 abs 技术 back
原文地址：https://www.cnblogs.com/qdlhj/p/9078621.html
