web前端入门到实战:css3循环,模拟拼多多动画效果

模拟拼多多动画效果,最终效果图如下:

我们看一下实现过程。

主框架是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如下

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 今日统计 1.数据结构,6小时06 2.思修,1小时25 3.英语阅读,1小时02 洗漱+早餐 0843--093...
    天热开风扇阅读 153评论 0 1
  • 这里讲两融标的扩大,一定程度上是利好,是释放一种管理层鼓励你们加杠杆的信号!但是,不是大利好,不是政策性足够改变盘...
    耳机患者阅读 125评论 0 0
  • 你往东 我往西 无数次 你转身离去 无数次 我沉默不语 离别 没有想象中那么容易 从此 你 再也看不到...
    一亿小目标阅读 328评论 5 2
  • 近年来,电商的磅礴发展和智慧零售的繁荣兴盛,让物流行业迎来了井喷式的发展,与此同时,物流行业产业链条的完善和...
    紫月蘅儿阅读 426评论 0 0