本篇文章给大家带来的内容是关于css如何实现水纹扩散的动画效果（纯代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
<!----><!----><!---->
css：
.main{ position: relative; height:70px; width: 310px; margin: 0 auto; 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-repeat center center; background-size: auto 18px;}.hr-x{ background: url("../images/hr_2.png") no-repeat center center; background-size: auto 18px;}.hr-r{ background: url("../images/hr_3.png") no-repeat center center; background-size: auto 18px;}/*按钮 大：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-repeat center center; background-size:39px 39px;}.icon-b{ background: url("../images/icon_b_3.png") no-repeat center center; background-size:39px 39px;}.icon-c{ background: url("../images/icon_c_3.png") no-repeat center center; background-size:39px 39px;}/*小 亮*/.icon-a-1{ background: url("../images/icon_a_2.png") no-repeat center center; background-size:39px 39px;}.icon-b-1{ background: url("../images/icon_b_2.png") no-repeat center center; background-size:39px 39px;}.icon-c-1{ background: url("../images/icon_c_2.png") no-repeat center center; background-size:39px 39px;}/*大 亮*/.icon-a-2{ background: url("../images/icon_a_1.png") no-repeat center center; background-size:47px 47px;}.icon-b-2{ background: url("../images/icon_b_1.png") no-repeat center center; background-size:47px 47px;}.icon-c-2{ background: url("../images/icon_c_1.png") no-repeat center center; background-size:47px 47px;}/*动效*/@keyframes warn { 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-keyframes warn { 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: 6px solid rgba(225,225,225,0.5); -webkit-border-radius:70px; -moz-border-radius: 70px; border-radius: 70px; z-index: 1; opacity: 0; -webkit-animation: warn 4s ease-out infinite; -moz-animation: warn 4s ease-out infinite; animation: warn 4s ease-out infinite;}.box-a{ position: absolute; width: 70px; height: 70px; border: 6px solid rgba(225,225,225,0.5); -webkit-border-radius:70px; -moz-border-radius: 70px; border-radius: 70px; z-index: 1; opacity: 0; -webkit-animation: warn 4s ease-out infinite; -moz-animation: warn 4s ease-out infinite; animation: warn 4s ease-out infinite; animation-delay:1s; -webkit-animation-delay:1s; /* Safari 和 Chrome */}.box-b{ position: absolute; width: 70px; height: 70px; border: 6px solid rgba(225,225,225,0.5); -webkit-border-radius:70px; -moz-border-radius: 70px; border-radius: 70px; z-index: 1; opacity: 0; -webkit-animation: warn 4s ease-out infinite; -moz-animation: warn 4s ease-out infinite; animation: warn 4s ease-out infinite; animation-delay:2s; -webkit-animation-delay:2s; /* Safari 和 Chrome */}.box-c{ position: absolute; width: 70px; height: 70px; border: 6px solid rgba(225,225,225,0.5); -webkit-border-radius:70px; -moz-border-radius: 70px; border-radius: 70px; z-index: 1; opacity: 0; -webkit-animation: warn 4s ease-out infinite; -moz-animation: warn 4s ease-out infinite; animation: warn 4s ease-out infinite; animation-delay:3s; -webkit-animation-delay:3s; /* Safari 和 Chrome */ }
相关推荐：
CSS3如何实现全景图的动画效果（附代码）
如何使用纯CSS3实现图片轮播的效果
立即学习“前端免费学习笔记（深入）”；
以上就是css如何实现水纹扩散的动画效果（纯代码）的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1611295.html
微信扫一扫 
支付宝扫一扫 
