CSS3 New Attribute Application

1. Animation effect

= = = = = = = = = = ""

<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: -%; -webkit-border-radius: -%; -moz-border-radius: -%; Border-radius: -%;}. Star. Point-dot {z-index:1; Background-color: #74E0F1; border:1px solid #74E0F1;}. PA-Ten{width: -%; Height: -%;}. Star. PA-Ten: after {position:absolute; Content:"';    Display:block; Left:0; Bottom:0; Top:0; Right:0;    Margin:auto; Border-radius: -%; -webkit-border-radius: -%; -moz-border-radius: -%; Border-radius: -%; 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- -: after {position:absolute; Content:"';    Display:block; Left:0; Bottom:0; Top:0; Right:0;    Margin:auto; Border-radius: -%; -webkit-border-radius: -%; -moz-border-radius: -%; Border-radius: -%; Opacity:0;    border:2px solid #74E0F1; -webkit-animation:ripple 3s linear1. 5s Infinite; -moz-animation:ripple 3s linear1. 5s Infinite; -o-animation:ripple 3s linear1. 5s Infinite; Animation:ripple 3s linear1. 5s Infinite;} @keyframes Ripple {0% {Transform:scale (0); Opacity:0;}  -% {Transform:scale (0.7); Opacity:1;}  -% {Transform:scale (1); Opacity:0;}}}}</style>class="Star"> <iclass="Point Point-dot"></i> <iclass="pa-10 Point"></i> <iclass="pa-20 Point"></i> </span></body>

CSS3 New Attribute Application