小编给大家分享一下怎么用css实现水纹扩散的动画效果，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
创新互联-专业网站定制、快速模板网站建设、高性价比新荣网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式新荣网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖新荣地区。费用合理售后完善，10余年实体公司更值得信赖。
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实现水纹扩散的动画效果”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！