经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » CSS3 » 查看文章
CSS3实现红包抖动效果_css3_CSS
来源:jb51  时间:2020/12/28 9:30:13  对本文有异议

有个需求是要实现红包的抖动效果,之前没做过,记录一下嘻嘻~~
这里用到了transform: rotate()属性,加上animation实现动画效果,不多说上代码

  1. .red_packet {
  2. width: 180rpx;
  3. height: 220rpx;
  4. position: fixed;
  5. top: 10rpx;
  6. right: 20rpx;
  7. color: #D60E19;
  8. animation: shake .5s linear infinite;
  9. }
  10. @keyframes shake {
  11.  
  12. 25% {
  13. transform: rotate(7deg);
  14. }
  15. 75% {
  16. transform: rotate(-7deg);
  17. }
  18.  
  19. 50%,
  20. 100% {
  21. transform: rotate(0);
  22. }
  23. }

开始实现的效果是这样式的

一直在左右摆动,但要实现的效果是隔几秒抖两下,animation不支持间隔时间动画怎么办呢?百度了一番,可以通过设置百分比,前三秒不动,从70%的时候开始抖动,而且要快准狠,改良了一番,效果如下:

  1. .red_packet {
  2. width: 180rpx;
  3. height: 220rpx;
  4. position: fixed;
  5. top: 10rpx;
  6. right: 20rpx;
  7. color: #D60E19;
  8. animation: shake 3s linear infinite;
  9. }
  10.  
  11. @keyframes shake {
  12.  
  13. 70%, 80% {
  14. transform: rotate(7deg);
  15. }
  16. 75% {
  17. transform: rotate(-7deg);
  18. }
  19.  
  20. 65%,
  21. 85% {
  22. transform: rotate(0);
  23. }
  24. }

到此这篇关于CSS3实现红包抖动效果的文章就介绍到这了,更多相关CSS3红包抖动内容请搜索w3xue以前的文章或继续浏览下面的相关文章,希望大家以后多多支持w3xue!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号