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怎么實現大小不一的粒子旋轉加載動畫”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！