经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » HTML/CSS » CSS » 查看文章
css实现快速炫酷抖动动画效果_CSS教程_CSS
来源：jb51　　时间：2021/2/1 11:31:18　　对本文有异议

1.Animate.css简介

Animate.css是一个可在您的Web项目中使用的即用型跨浏览器动画库。非常适合强调，首页，滑块和引导注意的提示。它是一个来自国外的 CSS3 动画库，它预设了抖动（shake）、闪烁（flash）、弹跳（bounce）、翻转（flip）、旋转（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多达 60 多种动画效果，几乎包含了所有常见的动画效果。虽然借助Animate.css 能够很方便、快速的制作 CSS3 动画效果，但还是建议看看Animate.css 的代码，也许你能从中学到一些东西。不论是在Web端和小程序内都可以正常使用，详细内容请到官方地址学习。

2.动画效果的实现

在使用过程中，可以根据自己的喜好来改造css代码来达到你想要的效果，文中动图显示可能不是特别直观，建议自己写一遍代码，即利于学习，又能够直观的体会到动画效果。

1.发光的盒子

a829c006974b702afb40c13b3e833c8b.png

wxml代码：

  1. <view id="box">I am LetCode!</view>

wxss代码：

  1. @keyframes animated-border {  
  2. 0% {  box-shadow: 0 0 0 0 rgba(255,255,255,0.4);   }  
  3. 100% {  box-shadow: 0 0 0 20px rgba(255,255,255,0);   } 
  4. } 
  5. #box { 
  6.   animation: animated-border 1.5s infinite;
  7.   height: 100rpx;
  8.   font-family: Arial;
  9.   font-size: 18px;
  10.   font-weight: bold;
  11.   color: white;
  12.   border: 2px solid;
  13.   border-radius: 10px;
  14.   margin: 100px 15px;
  15.   line-height: 100rpx;
  16.   text-align: center;
  17. }

2.文字的缩放效果

ac817519e904d565088807ebffd940ec.png

wxml代码：

  1. <view class="animate_zoomOutDown">关注公众号“Java技术迷”,有更多分享！</view>

wxss代码：

  1. @keyframes zoomOutDown 
  2. {  
  3. 40% 
  4. {  
  5. opacity: 1; 
  6. transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); 
  7. animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);  
  8. }  
  9. to 
  10. { 
  11. opacity: 0; 
  12. transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); 
  13. animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);   
  14. } 
  15. }
  16. .animate_zoomOutDown
  17. { 
  18. animation:2s linear 0s infinite alternate zoomOutDown; 
  19. font-family: Arial;  
  20. font-size: 18px;  
  21. font-weight: bold;  
  22. color: white;  
  23. margin-top: 70px; 
  24. text-align: center;  
  25. margin-top: 15px; 
  26. }

3.加载动画

8a2883678ecba7c2a639925431bfe289.png

wxml代码：

  1. <view class="load-container load">  
  2. <view class="loader">  
  3. </view> 
  4. </view> 
  5. <view class="txt">关注公众号“Java技术迷”,有更多分享！</view>

wxss代码：

  1.  .load-container
  2.  { 
  3.  width: 240px; 
  4.  height: 240px;  margin: 0 auto; 
  5.  position: relative;  
  6.  overflow: hidden;
  7.  box-sizing: border-box;
  8.  }  
  9.  .load .loader 
  10.  {  
  11.  color: #ffffff;  font-size: 90px;  text-indent: -9999em;  overflow: hidden;  
  12.  width: 1em;  height: 1em;  border-radius: 50%;  
  13.  margin: 72px auto;  
  14.  position: relative;  transform: translateZ(0); 
  15.  animation: load 1.7s infinite ease, round 1.7s infinite ease; 
  16.  }  @keyframes load
  17.  {  
  18.  0% 
  19.  { box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  20.  }  
  21.  5%, 95% 
  22.  { box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  23.  } 
  24.  10%, 59% 
  25.  {
  26.  box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
  27.  } 
  28.  20% { box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
  29.  } 
  30.  38% { box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
  31.  } 
  32.  100% { box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  33.  } 
  34.  } 
  35.  @keyframes round
  36.  { 
  37.  0% 
  38.  { 
  39.  transform: rotate(0deg);    
  40.  } 
  41.  100% 
  42.  {  
  43.  transform: rotate(360deg);     
  44.  } 
  45.  }

4.抖动的文字

22f97e304886a5f7e76bb9f4b623f549.png

wxml代码：

  1. <view class="shake-slow txt">关注公众号“Java技术迷”,有更多分享！</view>

wxss代码：

  1. @keyframes shake-slow 
  2. { 
  3. 2%
  4. { 
  5. transform: translate(6px, -2px) rotate(3.5deg);  
  6. }  
  7. 4% 
  8. {  
  9. transform: translate(5px, 8px) rotate(-0.5deg);  
  10. }  
  11. 6% 
  12. {  transform: translate(6px, -3px) rotate(-2.5deg);   
  13. }  
  14. 8% 
  15. {  transform: translate(4px, -2px) rotate(1.5deg);  
  16. }   
  17. 10% 
  18. {  
  19. transform: translate(-6px, 8px) rotate(-1.5deg);  
  20. }   
  21. 12% 
  22. { 
  23. transform: translate(-5px, 5px) rotate(1.5deg);  
  24. } 
  25. 14% {  transform: translate(4px, 10px) rotate(3.5deg);  
  26. }   16% {  transform: translate(0px, 4px) rotate(1.5deg); 
  27. }   18% {  transform: translate(-1px, -6px) rotate(-0.5deg); 
  28. }   20% {  transform: translate(6px, -9px) rotate(2.5deg); 
  29. }  
  30. 22% {  transform: translate(1px, -5px) rotate(-1.5deg);  
  31. }   24% {  transform: translate(-9px, 6px) rotate(-0.5deg); 
  32. }   26% {  transform: translate(8px, -2px) rotate(-1.5deg);   
  33. }   
  34. 28% {  transform: translate(2px, -3px) rotate(-2.5deg);   }   
  35. 30% 
  36.  
  37. {  transform: translate(9px, -7px) rotate(-0.5deg);   }   
  38. 32% 
  39. {  transform: translate(8px, -6px) rotate(-2.5deg);   }   
  40. 34%
  41. {  transform: translate(-5px, 1px) rotate(3.5deg);   }   
  42. 36%
  43. {  transform: translate(0px, -5px) rotate(2.5deg);   }   
  44. 38% 
  45. {  transform: translate(2px, 7px) rotate(-1.5deg);   }   
  46. 40% 
  47. {  transform: translate(6px, 3px) rotate(-1.5deg);   }   
  48. 42% 
  49. {  transform: translate(1px, -5px) rotate(-1.5deg);   }   
  50. 44%
  51. {  transform: translate(10px, -4px) rotate(-0.5deg);   }  
  52. 46% {  transform: translate(-2px, 2px) rotate(3.5deg);   }   
  53. 48% {  transform: translate(3px, 4px) rotate(-0.5deg);   }   
  54. 50% {  transform: translate(8px, 1px) rotate(-1.5deg);   }   
  55. 52% {  transform: translate(7px, 4px) rotate(-1.5deg);   }   
  56. 54% {  transform: translate(10px, 8px) rotate(-1.5deg);   }   
  57. 56% {  transform: translate(-3px, 0px) rotate(-0.5deg);   }   
  58. 58% {  transform: translate(0px, -1px) rotate(1.5deg);   }   
  59. 60% {  transform: translate(6px, 9px) rotate(-1.5deg);   }  
  60. 62% {  transform: translate(-9px, 8px) rotate(0.5deg);   }  
  61. 64% {  transform: translate(-6px, 10px) rotate(0.5deg);   }  
  62. 66% {  transform: translate(7px, 0px) rotate(0.5deg);   }   
  63. 68% {  transform: translate(3px, 8px) rotate(-0.5deg);   }  
  64. 70% {  transform: translate(-2px, -9px) rotate(1.5deg);   }  
  65. 72% {  transform: translate(-6px, 2px) rotate(1.5deg);   }   
  66. 74% {  transform: translate(-2px, 10px) rotate(-1.5deg);   }  
  67. 76% {  transform: translate(2px, 8px) rotate(2.5deg);   }  
  68. 78% {  transform: translate(6px, -2px) rotate(-0.5deg);   }   
  69. 80% {  transform: translate(6px, 8px) rotate(0.5deg);   }  
  70. 82% {  transform: translate(10px, 9px) rotate(3.5deg);   }   
  71. 84% {  transform: translate(-3px, -1px) rotate(3.5deg);   }   
  72. 86% {  transform: translate(1px, 8px) rotate(-2.5deg);   }   
  73. 88% {  transform: translate(-5px, -9px) rotate(2.5deg);   }  
  74. 90% {  transform: translate(2px, 8px) rotate(0.5deg);   }  
  75. 92% {  transform: translate(0px, -1px) rotate(1.5deg);   }  
  76. 94% {  transform: translate(-8px, -1px) rotate(0.5deg);   }   
  77. 96% {  transform: translate(-3px, 8px) rotate(-1.5deg);   }  
  78. 98%
  79.  
  80. {  
  81. transform: translate(4px, 8px) rotate(0.5deg);   
  82. }  
  83. 0%,100%
  84. { 
  85. transform: translate(0, 0) rotate(0);  
  86. }
  87. }  
  88. .shake-slow
  89. { 
  90. animation:shake-slow 5s infinite ease-in-out;
  91. }

在实际开发过程中，远不止这些炫酷的动画效果，在互联网迅速的发展状态下，还需要更多的程序员来实现功能需求，因此本文只做简单的介绍，未完待续.....

到此这篇关于css实现快速炫酷抖动动画效果的文章就介绍到这了,更多相关css抖动效果内容请搜索w3xue以前的文章或继续浏览下面的相关文章，希望大家以后多多支持w3xue！

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

CSS热门文章

  • CSS实现文字两端对齐
  • 【WEB基础】HTML & CSS 基础入门（6）超链接
  • Javascript 对象 - 数学对象
  • 对移动端兼容适配的分析
  • Element FORM结合Vue实现横向排列表单项
  • 如何让一个input输入框居中
  • CSS Grid 布局完全指南(图解 Grid 详细教程)
  • css常见的各种布局上（两列布局）
  • vue+element导入导出excel
  • WEB前端动态背景集

    • CSS推荐文章

  • CSS布局概念与技术教程
  • 15 分钟带你感受 CSS :has() 选择器的强大 - xingba-coder
  • 现代 CSS 解决方案：文字颜色自动适配背景色！
  • 脚踏esbuild祥云，胸怀tsx利刃，身披scss羽衣，追寻前端的本质
  • 深入解析css-笔记
  • CSS 还原拉斯维加斯球数字动画
  • 震惊！CSS 也能实现碰撞检测？
  • 前端开发如何更好的避免样式冲突？级联层(CSS@layer)
  • 现代 CSS 解决方案：CSS 原生支持的三角函数
  • 利用css var函数让你的组件样式输出规范样式API，可定制性更高；

    • 本站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号