html5水波式按钮_html5水波动态效果，纯css3波纹动态效果源码

css部分&＃xff1a;

.circleBox{

width: 200px;

height:500px;

margin:auto;

}

.circle1,.circle2,.circle3,.circle4,.circle5{

width: 200px;

height:200px;

border-radius:50%;

position:absolute ;

top:20%;

}

.circle5{

background-color:rgba(41,187,255,0.3);

}

.circle5>img{

width:25%;

height:25%;

margin: 35% auto 0;

vertical-align: initial;

position:relative;

left:37%;

}

.circle1{

animation: myfirst 4s linear 0s infinite;

background-color:rgba(41,187,255,0.3);

-moz-animation: myfirst 4s linear 0s infinite;/* Firefox */

-webkit-animation: myfirst 4s linear 0s infinite;/* Safari 和 Chrome */

-o-animation: myfirst 4s linear 0s infinite;/* Opera */

}

.circle2{

animation: myfirst 4s linear 1s infinite;

background-color:rgba(41,187,255,0.3);

-moz-animation: myfirst 4s linear 1s infinite;/* Firefox */

-webkit-animation: myfirst 4s linear 1s infinite;/* Safari 和 Chrome */

-o-animation:myfirst 4s linear 1s infinite;/* Opera */

}

.circle3{

animation: myfirst 4s linear 2s infinite;

background-color:rgba(41,187,255,0.3);

-moz-animation: myfirst 4s linear 2s infinite;/* Firefox */

-webkit-animation: myfirst 4s linear 2s infinite;/* Safari 和 Chrome */

-o-animation: myfirst 4s linear 2s infinite;/* Opera */

}

.circle4{

animation: myfirst 4s linear 3s infinite;

background-color:rgba(41,187,255,0.3);

-moz-animation: myfirst 4s linear 3s infinite;/* Firefox */

-webkit-animation: myfirst 4s linear 3s infinite;/* Safari 和 Chrome */

-o-animation: myfirst 4s linear 3s infinite;/* Opera */

}

&＃64;keyframes myfirst{

0% {

-webkit-transform: scale(1);

transform: scale(1);

opacity:1;

}

10% {

-webkit-transform: scale(1.15);

transform: scale(1.15);

opacity:0.9;

}

20% {

-webkit-transform: scale(1.3);

transform: scale(1.3);

opacity:0.8;

}

30% {

-webkit-transform: scale(1.45);

transform: scale(1.45);

opacity:0.7;

}

40% {

-webkit-transform: scale(1.6);

transform: scale(1.6);

opacity:0.6;

}

50% {

-webkit-transform: scale(1.75);

transform: scale(1.75);

opacity:0.5;

}

60% {

-webkit-transform: scale(1.9);

transform: scale(1.9);

opacity:0.4;

}

70% {

-webkit-transform: scale(2.05);

transform: scale(2.05);

opacity:0.3;

}

80% {

-webkit-transform: scale(2.2);

transform: scale(2.2);

opacity:0.2;

}

90% {

-webkit-transform: scale(2.35);

transform:scale(2.35);

opacity:0.1;

}

100% {

-webkit-transform: scale(2.5);

transform: scale(2.5);

opacity: 0;

}

}