您现在的位置是:网站首页>列表内容
CSS3实现红包抖动效果css3 transform过渡抖动问题解决css3动画效果抖动解决方法CSS 控制Html页面高度导致抖动问题的原因CSS3新浪微博模板商店鼠标悬停图片抖动特效css3让div随鼠标移动而抖动起来CSS 控制因Html页面高度导致抖动的问题解决方法
2021-09-03 08:51:16 700人已围观
简介 这篇文章主要介绍了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行过的烈焰之路称号获得方法_网络游戏_游戏攻略_
- 怪物猎人ol爆炸性的挚友称号属性及获得方法_网络游戏_游戏攻略_
- QQ炫舞家园仙界系列怎么用 仙灵幻境寻到宝物查收方法_网络游戏_游戏攻略_
- 天涯明月刀破旧的宝箱在哪钓 破旧的宝箱奖励一览_网络游戏_游戏攻略_
- 魔兽世界 7.0新增48种坐骑一览 新版公鸡坐骑_网络游戏_游戏攻略_
- NBA2KOL 大圣手臂纹身上架 效果一览_网络游戏_游戏攻略_
- FIFAOL3春节登录礼正月十五闹元宵活动奖励一览_网络游戏_游戏攻略_
- FIFAOnline3 春节登录好礼 正月十五元宵节活动_网络游戏_游戏攻略_
- FIFAOnline3 自动比赛券刷联赛 给力阵型分享_网络游戏_游戏攻略_
本栏推荐
-
怪物猎人ol行过的烈焰之路称号获得方法_网络游戏_游戏攻略_
-
怪物猎人ol爆炸性的挚友称号属性及获得方法_网络游戏_游戏攻略_
-
QQ炫舞家园仙界系列怎么用 仙灵幻境寻到宝物查收方法_网络游戏_游戏攻略_
-
天涯明月刀破旧的宝箱在哪钓 破旧的宝箱奖励一览_网络游戏_游戏攻略_
-
魔兽世界 7.0新增48种坐骑一览 新版公鸡坐骑_网络游戏_游戏攻略_
-
NBA2KOL 大圣手臂纹身上架 效果一览_网络游戏_游戏攻略_
-
FIFAOL3春节登录礼正月十五闹元宵活动奖励一览_网络游戏_游戏攻略_
-
FIFAOnline3 春节登录好礼 正月十五元宵节活动_网络游戏_游戏攻略_
-
FIFAOnline3 自动比赛券刷联赛 给力阵型分享_网络游戏_游戏攻略_