怎么用css实现水纹扩散的动画效果

小编给大家分享一下怎么用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实现水纹扩散的动画效果”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！