用CSS3怎样设置红包的抖动动画效果?
发布时间:2022-04-14 14:01:53 所属栏目:语言 来源:互联网
导读:这篇文章主要给大家分享如何用CSS3来实现红包抖动效果,小编觉得挺有趣,因此给大家分享一下实现代码,感兴趣的朋友可以参考参考,下面我们就一起来看看。 这里用到了transform: rotate()属性,加上animation实现动画效果,不多说上代码 .red_packet { width
这篇文章主要给大家分享如何用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%的时候开始抖动,而且要快准狠,改良了一番,效果如下: 对CSS3实现红包抖动效果的介绍就到这,上述代码仅供大家参考,希望对大家学习有帮助,想要了解更多CSS3的动画效果内容大家可以继续关注其他文章。 (编辑:云计算网_泰州站长网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |