css 按钮扩散效果,专治按钮效果不明显（扩散动画效果）

效果

需求

背景

由于最近自家小程序用户活跃用户下滑，老板看看自家小程序，发现分享按钮不够明显，于是乎有了下面这段对话。

老板：小明，你过来下，看看这个分享按钮不明显

小明：好的，给它点颜色瞧瞧

小明给按钮来了个红色，发给了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 对象，了解更多点击传送门