⽤CSS实现⽔波扩散的特效话不多说，代码甩来
带球撞人
（⼀）第⼀种⽅法
HTML
<body>
<div class="animate wave">
<div class="w1"></div>
<div class="w2"></div>
<div class="w3"></div>
<div class="w4"></div>
</div>
</body>
小学手工制作css
html{
font-size: 20px;
}
body{
茄子怎么吃
background:#444;
}
@-webkit-keyframes opac{
from {
opacity: 1;
width:0;
height:0;
top:50%;
left:50%;
}
to {
opacity : 0;
width:100%;
height:100%;
top:0;
left:0;
}
}
.animate .w2{
-webkit-animation-delay:1s;
}
.animate .w3{
-webkit-animation-delay:2s;
}
.animate .w4{
-webkit-animation-delay:3s;
}
.wave{
width: 22.7rem;
踽踽前行
height: 22.7rem;
position: absolute;
top: 0;
left: 0;
right: 0;
margin: 0 auto;
}
.wave *{
border:1px solid #fff;
position:absolute;
border-radius:50%;
-webkit-animation:opac 4s infinite; }
</style>
（⼆）第⼆种⽅法
竹竿的意思html
<body>
<div class="container">
<div class="dot"></div>
<div class="wave"></div>
</div>
</body>
css
.container{
position: relative;
创新的作文素材width: 100px;
height: 100px;
margin: 0 auto;
}
.dot{
position: absolute;
left: 15px;
top:15px;
width:6px;
height: 6px;
border-radius: 50%;管理的对象是
}
.wave{
position: absolute;
left: 2px;
top: 2px;
width: 24px;
height: 24px;
border: 6px solid red;
border-radius: 50%;
opacity: 0;
animation: waveCircle 3s ea-out; animation-iteration-count: infinite; }
@-webkit-keyframes waveCircle { 0%{
transform: scale(0);
opacity: 0;
}
10%{
transform: scale(0.1);
opacity: 0.1;
}
工程管理课程
20%{
transform: scale(0.2);
opacity: 0.2;
}
30%{
transform: scale(0.3);
opacity: 0.3;
}
75%{
transform: scale(0.6);
opacity: 0.5;
}
100%{
transform: scale(1);
opacity: 0;
}
}
</style>
