模拟拼多多动画效果, 最终效果图如下:
我们看一下实现过程.
主框架是 vue 开发, 做成了一个动画组件, 因为涉及到多个页面引用, 最主要的实现是 CSS3 语法实现过程, 并且要做到循环播放.
左边出来动画时间是 0.5 秒, 停留 3 秒往上走, 然后动画时间 0.5 秒, 停留 3 秒后然后消失, 消失动画时间 0.5 秒, 总共的时间消耗是 7.5 秒. 可以得到以下计算比例
- 0/7.5 = 0%
- 0.5/7.5 = 6.66%
- 3.5/7.5 = 46.66%
- 4/7.5 = 53.33%
- 7/7.5 = 93.33%
- 7.5/7.5 = 100%
然后每个比例所对应的 CSS 如下
自己是一个 6 年的前端工程师, 希望本文对你有帮助!
这里推荐一下我的前端学习交流扣 qun:731771211 , 里面都是学习前端的, 如果你想制作酷炫的网页, 想学习编程. 自己整理了一份 2019 最全面前端学习资料, 从最基础的 html+CSS+JS[炫酷特效, 游戏, 插件封装, 设计模式] 到移动端 HTML5 的项目实战的学习资料都有整理, 送给每一位前端小伙伴, 每天分享技术
点击: 加入
来源: http://www.jianshu.com/p/87c67ccee369