您现在的位置是:网站首页>列表内容
CSS3实现红包抖动效果css3 transform过渡抖动问题解决css3动画效果抖动解决方法CSS 控制Html页面高度导致抖动问题的原因CSS3新浪微博模板商店鼠标悬停图片抖动特效css3让div随鼠标移动而抖动起来CSS 控制因Html页面高度导致抖动的问题解决方法
2021-09-03 08:51:16 699人已围观
简介 这篇文章主要介绍了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红包抖动内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!