html5水波动态效果，纯css3波纹动态效果源码
1、body部分：
<body>
<div class="circleBox">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
<div class="circle5">
<img src="sijiaw.png"/>
</div>
</div>
</body>
2、css部分：
<style>
.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 */
}
@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;
}
}
</style>