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

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


文章标题:怎么用css实现水纹扩散的动画效果
转载源于:http://ybzwz.com/article/psodhh.html

其他资讯