怎么用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實現水紋擴散的動畫效果”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！