您现在的位置是:网站首页>列表内容
CSS3实现红包抖动效果css3 transform过渡抖动问题解决css3动画效果抖动解决方法CSS 控制Html页面高度导致抖动问题的原因CSS3新浪微博模板商店鼠标悬停图片抖动特效css3让div随鼠标移动而抖动起来CSS 控制因Html页面高度导致抖动的问题解决方法
2021-09-03 08:51:16 702人已围观
简介 这篇文章主要介绍了CSS3实现红包抖动效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
有个需求是要实现红包的抖动效果,之前没做过,记录一下嘻嘻~~
这里用到了transform: rotate()属性,加上animation实现动画效果,不多说上代码
.red_packet { width: 180rpx; height: 220rpx; position: fixed; top: 10rpx; right: 20rpx; color: #D60E19; animation: shake .5s linear infinite; } @keyframes shake { 25% { transform: rotate(7deg); } 75% { transform: rotate(-7deg); } 50%, 100% { transform: rotate(0); } }
开始实现的效果是这样式的
一直在左右摆动,但要实现的效果是隔几秒抖两下,animation不支持间隔时间动画怎么办呢?百度了一番,可以通过设置百分比,前三秒不动,从70%的时候开始抖动,而且要快准狠,改良了一番,效果如下:
.red_packet { width: 180rpx; height: 220rpx; position: fixed; top: 10rpx; right: 20rpx; color: #D60E19; animation: shake 3s linear infinite; } @keyframes shake { 70%, 80% { transform: rotate(7deg); } 75% { transform: rotate(-7deg); } 65%, 85% { transform: rotate(0); } }
到此这篇关于CSS3实现红包抖动效果的文章就介绍到这了,更多相关CSS3红包抖动内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!
点击排行
- 足球经理OL玩家对战进行方法介绍_网络游戏_游戏攻略_
- nba2kol王朝模式大前锋格里芬打法介绍_网络游戏_游戏攻略_
- 使命召唤OL本月签到活动网址_网络游戏_游戏攻略_
- 天涯明月刀传奇再临决战法兰西活动详细攻略_网络游戏_游戏攻略_
- 使命召唤OL豪礼送新兵活动网址_网络游戏_游戏攻略_
- 战争雷霆坦克杀手斯图尔·埃米尔怎么样 坦克杀手详细介绍_网络游戏_游戏攻略_
- QQ炫舞旅行挑战第46期SSS全攻略_炫舞旅行挑战46期1-10关搭配_网络游戏_游戏攻略_
- 战争雷霆乘员急救包如何使用 乘员急救包让你拥有第二次战斗机会_网络游戏_游戏攻略_
- 战争雷霆端午节活动是什么 端午节活动详细介绍_网络游戏_游戏攻略_
本栏推荐
-
足球经理OL玩家对战进行方法介绍_网络游戏_游戏攻略_
-
nba2kol王朝模式大前锋格里芬打法介绍_网络游戏_游戏攻略_
-
使命召唤OL本月签到活动网址_网络游戏_游戏攻略_
-
天涯明月刀传奇再临决战法兰西活动详细攻略_网络游戏_游戏攻略_
-
使命召唤OL豪礼送新兵活动网址_网络游戏_游戏攻略_
-
战争雷霆坦克杀手斯图尔·埃米尔怎么样 坦克杀手详细介绍_网络游戏_游戏攻略_
-
QQ炫舞旅行挑战第46期SSS全攻略_炫舞旅行挑战46期1-10关搭配_网络游戏_游戏攻略_
-
战争雷霆乘员急救包如何使用 乘员急救包让你拥有第二次战斗机会_网络游戏_游戏攻略_
-
战争雷霆端午节活动是什么 端午节活动详细介绍_网络游戏_游戏攻略_