用到的工具
animation
box-shadow
html:
<div class="watersource">
</div>
css:
.watersource{
background-color:red;
2px;
height:2px;
margin-left:200px;
margin-top:100px;
border-radius:100%;
background-color:0 0 0 0 rgba(255,20,150,.5);
-webkit-animation: ripple 1s linear 0s infinite normal both;
-o-animation: ripple 1s linear 0s infinite normal both;
animation: ripple 500ms linear 0s infinite normal both;
}
@keyframes ripple{
0% {
box-shadow:0 0 0 0 rgba(255,20,150,.5),0 0 0 10px rgba(255,20,50,.4),0 0 0 20px rgba(255,20,150,.3),0 0 0 30px rgba(255,20,150,.2),0 0 0 40px rgba(255,20,150,.1);
}
100% {
box-shadow:0 0 0 10px rgba(255,20,150,.5),0 0 0 20px rgba(255,20,150,.4),0 0 0 30px rgba(255,20,150,.3),0 0 0 40px rgba(255,20,150,.2),0 0 0 50px rgba(255,20,150,.1);
}
}
@keyframes test{
from{
2px;
height:2px;
}
to{
200px;
height:200px;
}
}