效果 [图片] 需求 背景 由于最近自家小程序用户活跃用户下滑，老板看看自家小程序，发现分享按钮不够明显，于是乎有了下面这段对话。 老板：小明，你过来下，看看这个分享按钮不明显 小明：好的，给它点颜色瞧瞧 小明给按钮来了个红色，发给了BOSS BOSS：还是不明显 小明：好的，给它点放大瞧瞧 小明把按钮从原来的60rpx放大到了230rpx，发给了BOSS BOSS：还是不明显 小明：好的，让它动起来！ 需求：提高分享率，做个扩散动画效果让这个按钮成为整个页面最靓的仔。 思路分析： 从小到大的变化 从颜色从深到浅 反复进行该动作 动画代码 实用 CSS3 的 animation 属性 代码 [代码].share-btn { width: 200rpx; height: 200rpx; } .share-btn::before { // 省略无关代码 animation: wave 1.5s ease-out infinite; } @keyframes wave { 50%, 75% { width: 230rpx; height: 230rpx; } 80%, 100% { opacity: 0; } } [代码] 分析 我们先来看看 animation 参数： animation: wave 1.5s ease-out infinite; animation: 关键帧名称 动画时长 动画形式 播放次数; ease-out：动画以低速结束 infinite：无限次播放 从参数可以得出来使用了wave这个关键帧参数，1.5完成一次扩散的动画，从快到满的速度，无限重复这个动画。 然后我们再来看看 keyframes 参数： 百分比：动画持续时间的百分比。 属性：CSS样式属性 从参数可以得出来 时间 50%->75% 的时候就会改变大小从200rpx-230rpx。 时间 80%->100% 的时候会改变透明度从0-1。 第一步：原始大小（高度：200，宽度：200，透明度：1） [图片] 第二步：改变大小（高度：230，宽度：230，透明度：1） [图片] 第三步：改变透明度（高度：230，宽度：230，透明度：0） [图片] 第四步：回到第一步 总结 做动画先分析步骤，然后设置 animation 参数。如果你觉得CSS比较麻烦的话，还可以使用小程序提供 Animation 对象实现。 css3 的 animation 的所有参数不局限以上这些，了解更多点击传送门 Animation 对象，了解更多点击传送门