CSS3实现红包抖动效果
(编辑:jimmy 日期: 2024/11/2 浏览:3 次 )
有个需求是要实现红包的抖动效果,之前没做过,记录一下嘻嘻~~
这里用到了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); } }
下一篇:css实现弹窗上下左右居中且背景透明锁定窗口效果