小编给大家分享一下怎么用css实现水纹扩散的动画效果，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
<divclass="mainclearfix">
<!–3*70=2102*50=100310–>
<divclass="circle">
<!–<divclass="box"></div>–>
<divclass="box-a"></div>
<divclass="box-b"></div>
<divclass="box-c"></div>
<divclass="box-iconicon-aicon-a-1"></div>
</div>
<!–hr正常灰色hr-x出错hr-r正确–>
<divclass="hrhr-x"></div>
<divclass="circle">
<!–<divclass="box"></div>–>
<divclass="box-a"></div>
<divclass="box-b"></div>
<divclass="box-c"></div>
<divclass="box-iconicon-bicon-b-2"></div>
</div>
<divclass="hrhr-r"></div>
<divclass="circle">
<!–<divclass="box"></div>–>
<divclass="box-a"></div>
<divclass="box-b"></div>
<divclass="box-c"></div>
<divclass="box-iconicon-cicon-c-3"></div>
</div>
</div>
css：
.main{
position:relative;
height:70px;
width:310px;
margin:0auto;
background-color:#f34147;
}
.circle{
position:relative;
float:left;
height:70px;
width:70px;
}
/*线*/
.hr{
position:relative;
float:left;
width:50px;
height:70px;
background:url("../images/hr_1.png")no-repeatcentercenter;
background-size:auto18px;
}
.hr-x{
background:url("../images/hr_2.png")no-repeatcentercenter;
background-size:auto18px;
}
.hr-r{
background:url("../images/hr_3.png")no-repeatcentercenter;
background-size:auto18px;
}
/*按钮大：47小：39*/
.box-icon{
position:absolute;
z-index:9999;
top:0;
right:0;
left:0;;
bottom:0;
width:70px;
height:70px;
}
/*小不亮*/
.icon-a{
background:url("../images/icon_a_3.png")no-repeatcentercenter;
background-size:39px39px;
}
.icon-b{
background:url("../images/icon_b_3.png")no-repeatcentercenter;
background-size:39px39px;
}
.icon-c{
background:url("../images/icon_c_3.png")no-repeatcentercenter;
background-size:39px39px;
}
/*小亮*/
.icon-a-1{
background:url("../images/icon_a_2.png")no-repeatcentercenter;
background-size:39px39px;
}
.icon-b-1{
background:url("../images/icon_b_2.png")no-repeatcentercenter;
background-size:39px39px;
}
.icon-c-1{
background:url("../images/icon_c_2.png")no-repeatcentercenter;
background-size:39px39px;
}
/*大亮*/
.icon-a-2{
background:url("../images/icon_a_1.png")no-repeatcentercenter;
background-size:47px47px;
}
.icon-b-2{
background:url("../images/icon_b_1.png")no-repeatcentercenter;
background-size:47px47px;
}
.icon-c-2{
background:url("../images/icon_c_1.png")no-repeatcentercenter;
background-size:47px47px;
}
/*动效*/
@keyframeswarn{
0%{
transform:scale(0.6);
opacity:0;
}
25%{
transform:scale(0.6);
opacity:0.8;
}
/*50%{*/
/*transform:scale(0.8);*/
/*opacity:0.4;*/
/*}*/
/*75%{*/
/*transform:scale(0.9);*/
/*opacity:0.3;*/
/*}*/
100%{
transform:scale(1);
opacity:0.1;
}
}
@-webkit-keyframeswarn{
0%{
-webkit-transform:scale(0);
opacity:0;
}
25%{
-webkit-transform:scale(0.6);
opacity:0.8;
}
/*50%{*/
/*-webkit-transform:scale(0.1);*/
/*opacity:0.3;*/
/*}*/
/*75%{*/
/*-webkit-transform:scale(0.5);*/
/*opacity:0.5;*/
/*}*/
100%{
-webkit-transform:scale(1);
opacity:0.1;
}
}
/*70*70的容器*/
.box{
position:absolute;
width:70px;
height:70px;
border:6pxsolidrgba(225,225,225,0.5);
-webkit-border-radius:70px;
-moz-border-radius:70px;
border-radius:70px;
z-index:1;
opacity:0;
-webkit-animation:warn4sease-outinfinite;
-moz-animation:warn4sease-outinfinite;
animation:warn4sease-outinfinite;
}
.box-a{
position:absolute;
width:70px;
height:70px;
border:6pxsolidrgba(225,225,225,0.5);
-webkit-border-radius:70px;
-moz-border-radius:70px;
border-radius:70px;
z-index:1;
opacity:0;
-webkit-animation:warn4sease-outinfinite;
-moz-animation:warn4sease-outinfinite;
animation:warn4sease-outinfinite;
animation-delay:1s;
-webkit-animation-delay:1s;/*Safari和Chrome*/
}
.box-b{
position:absolute;
width:70px;
height:70px;
border:6pxsolidrgba(225,225,225,0.5);
-webkit-border-radius:70px;
-moz-border-radius:70px;
border-radius:70px;
z-index:1;
opacity:0;
-webkit-animation:warn4sease-outinfinite;
-moz-animation:warn4sease-outinfinite;
animation:warn4sease-outinfinite;
animation-delay:2s;
-webkit-animation-delay:2s;/*Safari和Chrome*/
}
.box-c{
position:absolute;
width:70px;
height:70px;
border:6pxsolidrgba(225,225,225,0.5);
-webkit-border-radius:70px;
-moz-border-radius:70px;
border-radius:70px;
z-index:1;
opacity:0;
-webkit-animation:warn4sease-outinfinite;
-moz-animation:warn4sease-outinfinite;
animation:warn4sease-outinfinite;
animation-delay:3s;
-webkit-animation-delay:3s;/*Safari和Chrome*/
}
以上是“怎么用css实现水纹扩散的动画效果”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注云搜网行业资讯频道！
