有个需求是要实现红包的抖动效果,之前没做过,记录一下嘻嘻~~
这里用到了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红包抖动内容请搜索w3xue以前的文章或继续浏览下面的相关文章,希望大家以后多多支持w3xue!