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

这篇文章主要介绍“css3怎么实现大小不一的粒子旋转加载动画”，在日常操作中，相信很多人在CSS3怎么实现大小不一的粒子旋转加载动画问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”CSS3怎么实现大小不一的粒子旋转加载动画”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

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

CSS Code复制内容到剪贴板

1. #load3,     

2. #loader3 {     

3.  font-size: 20px;     

4.  margin: 80px 50px;     

5.  float: left;     

6.  width: 1em;     

7.  height: 1em;     

8.  border-radius: 50%;     

9.  position: relative;     

10.  text-indent: -9999em;     

11.  -WEBkit-animation: load3 1.3s infinite linear;     

12.  animation: load3 1.3s infinite linear;     

13. }     

14. @-webkit-keyframes load3 {     

15.    0%,     

16.    100% {     

17.      box-shadow: 0em -3em 0 0.2em #aaff00, 2em -2em 0 0em #aaff00,     

18.                  3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00,     

19.                  0em 3em 0 -0.5em #aaff00, -2em 2em 0 -0.5em #aaff00,     

20.                  -3em 0 0 -0.5em #aaff00, -2em -2em 0 0em #aaff00;     

21.    }     

22.    12.5% {     

23.      box-shadow: 0 -3em 0 0 #aaff00, 2em -2em 0 0.2em #aaff00,     

24.                  3em 0 0 0 #aaff00, 2em 2em 0 -0.5em #aaff00,     

25.                  0 3em 0 -0.5em #aaff00, -2em 2em 0 -0.5em #aaff00,     

26.                  -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00;     

27.    }     

28.    25% {     

29.       box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 0em #aaff00,     

30.                   3em 0 0 0.2em #aaff00, 2em 2em 0 0 #aaff00,     

31.                   0 3em 0 -0.5em #aaff00, -2em 2em 0 -0.5em #aaff00,     

32.                   -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00;     

33.    }     

34.    37.5% {     

35.        box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00,     

36.                    3em 0 0 0 #aaff00, 2em 2em 0 0.2em #aaff00,     

37.                    0 3em 0 0 #aaff00, -2em 2em 0 -0.5em #aaff00,     

38.                    -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00;     

39.   }     

40.   50% {     

41.       box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00,     

42.                   3em 0 0 -0.5em #aaff00, 2em 2em 0 0 #aaff00,     

43.                   0 3em 0 0.2em #aaff00, -2em 2em 0 0 #aaff00,     

44.                   -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00;     

45.   }     

46.   62.5% {     

47.       box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00,     

48.                   3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00,     

49.                   0 3em 0 0 #aaff00, -2em 2em 0 0.2em #aaff00,     

50.                   -3em 0 0 0 #aaff00, -2em -2em 0 -0.5em #aaff00;     

51.   }     

52.   75% {     

53.      box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00,     

54.                  3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00,     

55.                  0 3em 0 -0.5em #aaff00, -2em 2em 0 0 #aaff00,     

56.                  -3em 0 0 0.2em #aaff00, -2em -2em 0 0 #aaff00;     

57.   }     

58.   87.5% {     

59.      box-shadow: 0 -3em 0 0 #aaff00, 2em -2em 0 -0.5em #aaff00,     

60.                  3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00,     

61.                  0 3em 0 -0.5em #aaff00, -2em 2em 0 0 #aaff00,     

62.                  -3em 0 0 0 #aaff00, -2em -2em 0 0.2em #aaff00;     

63.   }     

64. }     

65. @keyframes load3 {     

66.   0%,     

67.   100% {     

68.       box-shadow: 0 -3em 0 0.2em #aaff00, 2em -2em 0 0 #aaff00,     

69.                   3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00,     

70.                   0 3em 0 -0.5em #aaff00, -2em 2em 0 -0.5em #aaff00,     

71.                   -3em 0 0 -0.5em #aaff00, -2em -2em 0 0 #aaff00;     

72.   }     

73.   12.5% {     

74.       box-shadow: 0 -3em 0 0 #aaff00, 2em -2em 0 0.2em #aaff00,     

75.                   3em 0 0 0 #aaff00, 2em 2em 0 -0.5em #aaff00,     

76.                   0 3em 0 -0.5em #aaff00, -2em 2em 0 -0.5em #aaff00,     

77.                   -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00;     

78.   }     

79.   25% {     

80.       box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 0 #aaff00,     

81.                   3em 0 0 0.2em #aaff00, 2em 2em 0 0 #aaff00,     

82.                   0 3em 0 -0.5em #aaff00, -2em 2em 0 -0.5em #aaff00,     

83.                   -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00;     

84.   }     

85.   37.5% {     

86.      box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00,     

87.                  3em 0 0 0 #aaff00, 2em 2em 0 0.2em #aaff00,     

88.                  0 3em 0 0 #aaff00, -2em 2em 0 -0.5em #aaff00,     

89.                  -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00;     

90.    }     

91.    50% {     

92.       box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00,     

93.                   3em 0 0 -0.5em #aaff00, 2em 2em 0 0 #aaff00,     

94.                   0 3em 0 0.2em #aaff00, -2em 2em 0 0 #aaff00,     

95.                   -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00;     

96.    }     

97.    62.5% {     

98.        box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00,     

99.                    3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00,     

100.                    0 3em 0 0 #aaff00, -2em 2em 0 0.2em #aaff00,     

101.                    -3em 0 0 0 #aaff00, -2em -2em 0 -0.5em #aaff00;     

102.   }     

103.   75% {     

104.       box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00,     

105.                   3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00,     

106.                   0 3em 0 -0.5em #aaff00, -2em 2em 0 0 #aaff00,     

107.                   -3em 0 0 0.2em #aaff00, -2em -2em 0 0 #aaff00;     

108.    }     

109.    87.5% {     

110.        box-shadow: 0 -3em 0 0 #aaff00, 2em -2em 0 -0.5em #aaff00,     

111.                    3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00,     

112.                    0 3em 0 -0.5em #aaff00, -2em 2em 0 0 #aaff00,     

113.                    -3em 0 0 0 #aaff00, -2em -2em 0 0.2em #aaff00;     

114.   }     

115. }     

116.   

到此，关于“CSS3怎么实现大小不一的粒子旋转加载动画”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！