CSS3如何实现粒子旋转伸缩加载动画

互联网
少了你的风景，我没有美丽的人生。天气真好!一起去郊游吧，拥抱大自然，呼吸清新的空气，享受悠闲和温馨。

本文运用CSS3的旋转Transform属性和动画的执行百分比制作而成，很特别的CSS3实现粒子旋转伸缩加载动画，具体内容如下

CSS Code复制内容到剪贴板
  1. #loader6{
  2. margin:60px50px;
  3. float:left;
  4. font-size:90px;
  5. text-indent:-9999em;
  6. overflow:hidden;
  7. width:1em;
  8. height:1em;
  9. border-radius:50%;
  10. position:relative;
  11. -webkit-animation:load61.7sinfiniteease;
  12. animation:load61.7sinfiniteease;
  13. }
  14. @-webkit-keyframesload6{
  15. 0%{
  16. -webkit-transform:rotate(0deg);
  17. transform:rotate(0deg);
  18. box-shadow:-0.11em-0.83em0-0.4em#ff0000,-0.11em-0.83em0-0.42em#ff0000,
  19. -0.11em-0.83em0-0.44em#ff0000,-0.11em-0.83em0-0.46em#ff0000,
  20. -0.11em-0.83em0-0.477em#ff0000;
  21. }
  22. 5%,
  23. 95%{
  24. box-shadow:-0.11em-0.83em0-0.4em#ff0000,-0.11em-0.83em0-0.42em#ff0000,
  25. -0.11em-0.83em0-0.44em#ff0000,-0.11em-0.83em0-0.46em#ff0000,
  26. -0.11em-0.83em0-0.477em#ff0000;
  27. }
  28. 30%{
  29. box-shadow:-0.11em-0.83em0-0.4em#ff0000,-0.51em-0.66em0-0.42em#ff0000,
  30. -0.75em-0.36em0-0.44em#ff0000,-0.83em-0.03em0-0.46em#ff0000,
  31. -0.81em0.21em0-0.477em#ff0000;
  32. }
  33. 55%{
  34. box-shadow:-0.11em-0.83em0-0.4em#ff0000,-0.29em-0.78em0-0.42em#ff0000,
  35. -0.43em-0.72em0-0.44em#ff0000,-0.52em-0.65em0-0.46em#ff0000,
  36. -0.57em-0.61em0-0.477em#ff0000;
  37. }
  38. 100%{
  39. -webkit-transform:rotate(360deg);
  40. transform:rotate(360deg);
  41. box-shadow:-0.11em-0.83em0-0.4em#ff0000,-0.11em-0.83em0-0.42em#ff0000,
  42. -0.11em-0.83em0-0.44em#ff0000,-0.11em-0.83em0-0.46em#ff0000,
  43. -0.11em-0.83em0-0.477em#ff0000;
  44. }
  45. }
  46. @keyframesload6{
  47. 0%{
  48. -webkit-transform:rotate(0deg);
  49. transform:rotate(0deg);
  50. box-shadow:-0.11em-0.83em0-0.4em#ff0000,-0.11em-0.83em0-0.42em#ff0000,
  51. -0.11em-0.83em0-0.44em#ff0000,-0.11em-0.83em0-0.46em#ff0000,
  52. -0.11em-0.83em0-0.477em#ff0000;
  53. }
  54. 5%,
  55. 95%{
  56. box-shadow:-0.11em-0.83em0-0.4em#ff0000,-0.11em-0.83em0-0.42em#ff0000,
  57. -0.11em-0.83em0-0.44em#ff0000,-0.11em-0.83em0-0.46em#ff0000,
  58. -0.11em-0.83em0-0.477em#ff0000;
  59. }
  60. 30%{
  61. box-shadow:-0.11em-0.83em0-0.4em#ff0000,-0.51em-0.66em0-0.42em#ff0000,
  62. -0.75em-0.36em0-0.44em#ff0000,-0.83em-0.03em0-0.46em#ff0000,
  63. -0.81em0.21em0-0.477em#ff0000;
  64. }
  65. 55%{
  66. box-shadow:-0.11em-0.83em0-0.4em#ff0000,-0.29em-0.78em0-0.42em#ff0000,
  67. -0.43em-0.72em0-0.44em#ff0000,-0.52em-0.65em0-0.46em#ff0000,
  68. -0.57em-0.61em0-0.477em#ff0000;
  69. }
  70. 100%{
  71. -webkit-transform:rotate(360deg);
  72. transform:rotate(360deg);
  73. box-shadow:-0.11em-0.83em0-0.4em#ff0000,-0.11em-0.83em0-0.42em#ff0000,
  74. -0.11em-0.83em0-0.44em#ff0000,-0.11em-0.83em0-0.46em#ff0000,
  75. -0.11em-0.83em0-0.477em#ff0000;
  76. }
  77. }

以上就是本文的全部内容，希望对大家学习CSS样式编写有所帮助，制作出更多精彩的加载动画效果。

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