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>css3新属性运用
原文地址：https://www.cnblogs.com/qdlhj/p/9078621.html