评论

专治按钮效果不明显(扩散动画效果)

CSS3 实现扩散动画效果

效果

需求

背景

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

老板:小明,你过来下,看看这个分享按钮不明显
小明:好的,给它点颜色瞧瞧

小明给按钮来了个红色,发给了BOSS

BOSS:还是不明显
小明:好的,给它点放大瞧瞧

小明把按钮从原来的60rpx放大到了230rpx,发给了BOSS

BOSS:还是不明显
小明:好的,让它动起来!

需求:提高分享率,做个扩散动画效果让这个按钮成为整个页面最靓的仔。

思路分析:

  1. 从小到大的变化
  2. 从颜色从深到浅
  3. 反复进行该动作

动画代码

实用 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样式属性

从参数可以得出来

  1. 时间 50%->75% 的时候就会改变大小从200rpx-230rpx。
  2. 时间 80%->100% 的时候会改变透明度从0-1。

第一步:原始大小(高度:200,宽度:200,透明度:1)

第二步:改变大小(高度:230,宽度:230,透明度:1)

第三步:改变透明度(高度:230,宽度:230,透明度:0)

第四步:回到第一步

总结

做动画先分析步骤,然后设置 animation 参数。如果你觉得CSS比较麻烦的话,还可以使用小程序提供 Animation 对象实现。

css3 的 animation 的所有参数不局限以上这些,了解更多点击传送门
Animation 对象,了解更多点击传送门

最后一次编辑于  08-17  
点赞 3
收藏
评论

2 个评论

  • 比昂
    比昂
    08-18

    我写了一边 按钮没反应

    08-18
    赞同
    回复 1
    • 陈宇明
      陈宇明
      08-18
      看下你都代码片段
      08-18
      回复
  • wang li
    wang li
    08-17

    收藏了再看

    08-17
    赞同
    回复
登录 后发表内容