本文主要是介绍css3 实现水波动画，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
效果如图所示：
对应代码如下所示：
html代码：
<view class="draw">参与抽奖</view>css代码：
.draw{margin-left: auto; margin-right: auto; width: 120px; height: 120px;border-radius: 100px; text-align: center; line-height: 120px; color: #fff;background: rgb(242,69,37);/* 使用动画：动画名称 动画时常 动画速度*/animation: draw 1s linear infinite; }/* 定义动画 */@keyframes draw { 0% { box-shadow: 0 0 0 5px rgba(245, 226, 226, 1), 0 0 0 0 rgba(242, 69, 37, 1); } 50% { box-shadow: 0 0 0 10px rgba(245, 226, 226, .5), 0 0 0 0 rgba(242, 69, 37, 0.8); } 100% { box-shadow: 0 0 0 20px rgba(245, 226, 226, 0), 0 0 0 20px rgba(245, 226, 226, 0); }}这篇关于css3 实现水波动画的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
