CSS3如何实现大小不一的粒子旋转加载动画

互联网
不是每天都有阳光，不是每天都会凉爽，只要我们心中有阳光，人生总会是晴朗，只要我们心中有凉爽，每天都会充满希望。早安！

先看看效果图，像是气泡在上升：

CSS Code复制内容到剪贴板
  1. #load3,
  2. #loader3{
  3. font-size:20px;
  4. margin:80px50px;
  5. float:left;
  6. width:1em;
  7. height:1em;
  8. border-radius:50%;
  9. position:relative;
  10. text-indent:-9999em;
  11. -webkit-animation:load31.3sinfinitelinear;
  12. animation:load31.3sinfinitelinear;
  13. }
  14. @-webkit-keyframesload3{
  15. 0%,
  16. 100%{
  17. box-shadow:0em-3em00.2em#aaff00,2em-2em00em#aaff00,
  18. 3em00-0.5em#aaff00,2em2em0-0.5em#aaff00,
  19. 0em3em0-0.5em#aaff00,-2em2em0-0.5em#aaff00,
  20. -3em00-0.5em#aaff00,-2em-2em00em#aaff00;
  21. }
  22. 12.5%{
  23. box-shadow:0-3em00#aaff00,2em-2em00.2em#aaff00,
  24. 3em000#aaff00,2em2em0-0.5em#aaff00,
  25. 03em0-0.5em#aaff00,-2em2em0-0.5em#aaff00,
  26. -3em00-0.5em#aaff00,-2em-2em0-0.5em#aaff00;
  27. }
  28. 25%{
  29. box-shadow:0-3em0-0.5em#aaff00,2em-2em00em#aaff00,
  30. 3em000.2em#aaff00,2em2em00#aaff00,
  31. 03em0-0.5em#aaff00,-2em2em0-0.5em#aaff00,
  32. -3em00-0.5em#aaff00,-2em-2em0-0.5em#aaff00;
  33. }
  34. 37.5%{
  35. box-shadow:0-3em0-0.5em#aaff00,2em-2em0-0.5em#aaff00,
  36. 3em000#aaff00,2em2em00.2em#aaff00,
  37. 03em00#aaff00,-2em2em0-0.5em#aaff00,
  38. -3em00-0.5em#aaff00,-2em-2em0-0.5em#aaff00;
  39. }
  40. 50%{
  41. box-shadow:0-3em0-0.5em#aaff00,2em-2em0-0.5em#aaff00,
  42. 3em00-0.5em#aaff00,2em2em00#aaff00,
  43. 03em00.2em#aaff00,-2em2em00#aaff00,
  44. -3em00-0.5em#aaff00,-2em-2em0-0.5em#aaff00;
  45. }
  46. 62.5%{
  47. box-shadow:0-3em0-0.5em#aaff00,2em-2em0-0.5em#aaff00,
  48. 3em00-0.5em#aaff00,2em2em0-0.5em#aaff00,
  49. 03em00#aaff00,-2em2em00.2em#aaff00,
  50. -3em000#aaff00,-2em-2em0-0.5em#aaff00;
  51. }
  52. 75%{
  53. box-shadow:0-3em0-0.5em#aaff00,2em-2em0-0.5em#aaff00,
  54. 3em00-0.5em#aaff00,2em2em0-0.5em#aaff00,
  55. 03em0-0.5em#aaff00,-2em2em00#aaff00,
  56. -3em000.2em#aaff00,-2em-2em00#aaff00;
  57. }
  58. 87.5%{
  59. box-shadow:0-3em00#aaff00,2em-2em0-0.5em#aaff00,
  60. 3em00-0.5em#aaff00,2em2em0-0.5em#aaff00,
  61. 03em0-0.5em#aaff00,-2em2em00#aaff00,
  62. -3em000#aaff00,-2em-2em00.2em#aaff00;
  63. }
  64. }
  65. @keyframesload3{
  66. 0%,
  67. 100%{
  68. box-shadow:0-3em00.2em#aaff00,2em-2em00#aaff00,
  69. 3em00-0.5em#aaff00,2em2em0-0.5em#aaff00,
  70. 03em0-0.5em#aaff00,-2em2em0-0.5em#aaff00,
  71. -3em00-0.5em#aaff00,-2em-2em00#aaff00;
  72. }
  73. 12.5%{
  74. box-shadow:0-3em00#aaff00,2em-2em00.2em#aaff00,
  75. 3em000#aaff00,2em2em0-0.5em#aaff00,
  76. 03em0-0.5em#aaff00,-2em2em0-0.5em#aaff00,
  77. -3em00-0.5em#aaff00,-2em-2em0-0.5em#aaff00;
  78. }
  79. 25%{
  80. box-shadow:0-3em0-0.5em#aaff00,2em-2em00#aaff00,
  81. 3em000.2em#aaff00,2em2em00#aaff00,
  82. 03em0-0.5em#aaff00,-2em2em0-0.5em#aaff00,
  83. -3em00-0.5em#aaff00,-2em-2em0-0.5em#aaff00;
  84. }
  85. 37.5%{
  86. box-shadow:0-3em0-0.5em#aaff00,2em-2em0-0.5em#aaff00,
  87. 3em000#aaff00,2em2em00.2em#aaff00,
  88. 03em00#aaff00,-2em2em0-0.5em#aaff00,
  89. -3em00-0.5em#aaff00,-2em-2em0-0.5em#aaff00;
  90. }
  91. 50%{
  92. box-shadow:0-3em0-0.5em#aaff00,2em-2em0-0.5em#aaff00,
  93. 3em00-0.5em#aaff00,2em2em00#aaff00,
  94. 03em00.2em#aaff00,-2em2em00#aaff00,
  95. -3em00-0.5em#aaff00,-2em-2em0-0.5em#aaff00;
  96. }
  97. 62.5%{
  98. box-shadow:0-3em0-0.5em#aaff00,2em-2em0-0.5em#aaff00,
  99. 3em00-0.5em#aaff00,2em2em0-0.5em#aaff00,
  100. 03em00#aaff00,-2em2em00.2em#aaff00,
  101. -3em000#aaff00,-2em-2em0-0.5em#aaff00;
  102. }
  103. 75%{
  104. box-shadow:0-3em0-0.5em#aaff00,2em-2em0-0.5em#aaff00,
  105. 3em00-0.5em#aaff00,2em2em0-0.5em#aaff00,
  106. 03em0-0.5em#aaff00,-2em2em00#aaff00,
  107. -3em000.2em#aaff00,-2em-2em00#aaff00;
  108. }
  109. 87.5%{
  110. box-shadow:0-3em00#aaff00,2em-2em0-0.5em#aaff00,
  111. 3em00-0.5em#aaff00,2em2em0-0.5em#aaff00,
  112. 03em0-0.5em#aaff00,-2em2em00#aaff00,
  113. -3em000#aaff00,-2em-2em00.2em#aaff00;
  114. }
  115. }

以上就是本文的全部内容，希望对大家学习CSS加载动画好代码教程有所帮助。

您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案
CSS如何使用Flex和Grid布局如何实现3D骰子
Flex布局史上最简单使用语法教程
新的CSS 伪类函数 :is() 和 :where()示例详解
纯CSS打字动画的如何实现示例