[游戏开发]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); }}

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖