css3循环，模拟拼多多动画效果

最新推荐文章于 2024-04-08 09:42:03 发布
最新推荐文章于 2024-04-08 09:42:03 发布
阅读量927 收藏 1
点赞数
文章标签： css html 前端 web 前端开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45974707/article/details/103872846
版权
该博客介绍如何利用CSS3语法在Vue组件中模拟拼多多的动画效果，详细阐述了动画的播放流程和时间比例，包括0.5秒显示、3秒停留、0.5秒上移、3秒消失等步骤，总时长为7.5秒。通过计算各个阶段的时间比例，设置对应的CSS样式来实现循环播放。
摘要由CSDN通过智能技术生成

模拟拼多多动画效果，最终效果图如下：

我们看一下实现过程。

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

web世界之窗
关注
CSS3完结，拼多多练习
爱学习的豪豪的博客
07-28 448
1.景深 perspective 视线的距离 perspective: 1200px;(加在父元素上) transform:perspective(1200px); （在子元素中使用） 2.3D呈现 transform-style:preserve-3d; 3.3D位移 主要包括translateZ()和translate3d() translateZ() 让元素在3D空间沿Z轴位移 4.3D旋转 rotateX()、rotateY()、rotateZ()和rotate3d(x,y,z,a) 5.CSS3动
css3实现红包弹出并翻转效果
qq_39692513的博客
12-15 919
css3实现红包弹窗出现并翻转效果
web前端入门到实战：css3循环，模拟拼多多动画效果
软件开发-前端开发-IT
10-31 1194
模拟拼多多动画效果，最终效果图如下： 我们看一下实现过程。 主框架是vue开发，做成了一个动画组件，因为涉及到多个页面引用，最主要的实现是css3语法实现过程，并且要做到循环播放。 左边出来动画时间是0.5秒，停留3秒往上走，然后动画时间0.5秒，停留3秒后然后消失，消失动画时间0.5秒，总共的时间消耗是7.5秒。可以得到以下计算比例 如果大家对编程，web前端感兴趣，想要学习，打算深入...
仿拼多多电商红包摆动效果
03-24
通过css3 的 animation + @keyframes + transform:rotate 实现仿拼多多红包摆动效果
仿拼多多拼单 向上无缝滚动
QUX轻博客
05-08 907
网上有很多无缝滚动的插件，在这推荐一下我经常使用的jquery无缝向上滚动的插件： css直接省略了，自己写吧！ html部分：class名字改的...
仿一品店活动倒计时时间滚动效果
weixin_33858249的博客
07-18 95
2019独角兽企业重金招聘Python工程师标准>>> ...
金三银四，磨砺锋芒；剑指大厂，扬帆起航（2020年最全大厂WEB前端面试题精选）中
weixin_45992710的博客
01-15 626
引言 元旦匆匆而过，2020年的春节又接踵而来，大家除了忙的提着裤子加班、年底冲冲冲外，还有着对于明年的迷茫和期待！2019年有多少苦涩心酸，2020年就有更多幸福美好，加油，奥利给！怀着一颗积极向上的心，来面对未来每一天的挑战！ 所谓“兵马未动，粮草先行”，我们打响明天的战役也需要精神食粮来做后勤保障才是。在此我整理了多位从业者和我在2019年底至2020年初的一厂面试精选题，希望对磨砺锋芒、奋...
2022年最新前端面试题（大前端时代来临卷起来吧小伙子们..持续维护走到哪记到哪）
m0_55613022的博客
02-24 3224
HTML和Css部分 1、对BFC规范（块级格式化上下文）的理解 BFC 块级格式化上下文 一块独立的区域，有自己的规则，bfc中的元素与外界的元素互不影响 BFC是一块用来独立的布局环境，保护其中内部元素不受外部影响，也不影响外部。 怎么触发BFC 1. float的值left或right 2. overflow的值不为visible（默认） 3. display的值为inline-block、table-cell、table-caption 4. position的值为absolute（绝对定位）或f
HTML+CSS实现拼多多官网首页
weixin_54138158的博客
03-28 7857
网页头部、主体以及尾部的截图
jquery+css3滑动头像特效代码
03-20
jquery+css3滑动头像是一款基于jquery+css3实现的创意头像滑动展示效果。 注：本款特效不支持IE浏览器！ jquery+css3滑动头像效果图：
偏前端-纯css,手写轮播-（焦点切换 和 自动轮播 只可选择一种，两者不可共存）...
weixin_30496431的博客
12-26 99
现在我们一般都是在网上找个轮播插件，各种功能应有尽有，是吧！！~大家似乎已经生疏了手写是什么感觉。万一哪天想不起来，人家要手写，就尴尬了！~~跟我一起复习一下吧 不多说：效果图看一下： 高度不能是固定的哈，用padding 和 position 来解决，动画效果也可以改的哦！~ css: 1 /*css reset start*/ 2 *{ ...
前端写图片、头像或者卡片堆叠效果（类似京东，拼多多效果）
qq_43296918的博客
03-04 2152
现在大多商品卡或者推广都有xx正在买，展示头像堆叠效果 像下面效果（图片从左到右的堆叠效果） 下面是代码思路（可参考可改造） 主题思路是定位，然后移动一定的位置，从而实现效果。 加上边框，头像间更加明显 代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wid
拼多多面试技巧，你不知道的CSS霓虹灯文字总结(1)，哪里可以学前端开发
最新发布
2401_83620690的博客
04-08 518
大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。一个人可以走的很快，但一群人才能走的更远。
纯css写滚动的弹幕特效
lll19960406的博客
01-10 608
最近在写一个春节活动，里面有一个类似拼多多展示中奖用户的弹幕滚动。 后台给了随机滚动将近一百条数据，之前写过一版，是使用定位，将数据顶上去，但是一秒一动的效果略略有些卡顿。后来决定使用css动画来实现 先来上代码吧 <view class="chat"> <view class="chatInfo" v-for="(item,i) in chatArr" :ke...
拼多多红包项目，0门槛，有手机就能操作，当天就能看到效果
gapjun0722的博客
03-24 182
我们主要是通过在拼多多买低价商品，给商家好评，商家给我们红包1元或2元。项目合法合规，没有对商家和平台造成损失，请放心大胆的玩。
自动切换轮播图而且图片会放大
m0_64489075的博客
09-15 627
通过设置CSS样式来定义轮播图容器的大小和图片的位置。JavaScript代码中，将所有图片元素存储在一个数组中，并使用。函数来实现图片的切换和放大效果，通过。函数，实现图片自动切换的效果。
pdd的动画效果
weixin_47175934的博客
12-14 525
pdd动画
【前端】参考C站动态发红包界面，高度还原布局和交互
小5聊的博客
02-12 3329
模仿C站红包前端界面，总结一篇前端布局文章，非常适合初始学者或入门小伙伴
CSS3模拟Windows XP加载动画效果源码分享
本源码可能已经考虑了多种浏览器的支持，例如Chrome、Firefox、Safari等现代浏览器通常能很好地支持CSS3动画，但对于一些较老的浏览器可能需要添加兼容性前缀（如-webkit-, -moz-, -o-等）或者提供后备的JavaScript...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值