如何實現基于css3的列表toggle特效

這篇文章主要講解了“如何實現基于css3的列表toggle特效”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“如何實現基于css3的列表toggle特效”吧！

　　實現的代碼。

　　htm代碼：

復制內容到剪貼板

1. <div class='menu'>   

2.         toggle visibility</div>   

3.     <ul class='list reverse'>   

4.         <li class='item'>Item 1</li>   

5.         <li class='item'>Item 2</li>   

6.         <li class='item'>Item 3</li>   

7.         <li class='item'>Item 4</li>   

8.         <li class='item'>Item 5</li>   

9.         <li class='item'>Item 6</li>   

10.         <li class='item'>Item 7</li>   

11.         <li class='item'>Item 8</li>   

12.         <li class='item'>Item 9</li>   

13.         <li class='item'>Item 10</li>   

14.         <li class='item'>Item 11</li>   

15.         <li class='item'>Item 12</li>   

16.     </ul>  

　　css3代碼：

CSS Code復制內容到剪貼板

1. * {   

2.   -moz-box-sizing: border-box;   

3.        box-sizing: border-box;   

4. }   

5.   

6. body {   

7.   margin: 0;   

8.   padding: 0;   

9.   font-family: 'Avenir Next';   

10.   background: #000;   

11.   color: white;   

12. }   

13.   

14. .menu {   

15.   background: tomato;   

16.   padding: 20px;   

17.   position: absolute;   

18.   z-index: 1;   

19.   height: 55px;   

20.   top: 0;   

21.   rightright: 50px;   

22. }   

23.   

24. .list {   

25.   -webkit-perspective: 100vw;   

26.           perspective: 100vw;   

27.   width: 100vw;   

28.   height: 100vh;   

29.   display: -webkit-flex;   

30.   display: -ms-flexbox;   

31.   display: flex;   

32.   -webkit-flex-flow: column wrap;   

33.       -ms-flex-flow: column wrap;   

34.           flex-flow: column wrap;   

35. }   

36. .list.hidden {   

37.   pointer-events: none;   

38. }   

39. .list.hidden .item {   

40.   -webkit-animation: disappear both;   

41.           animation: disappear both;   

42.   -webkit-animation-direction: alternate;   

43.           animation-direction: alternate;   

44. }   

45. .list.reverse {   

46.   -webkit-flex-flow: row-reverse wrap-reverse;   

47.       -ms-flex-flow: row-reverse wrap-reverse;   

48.           flex-flow: row-reverse wrap-reverse;   

49. }   

50.   

51. .item {   

52.   font-size: 30px;   

53.   padding: 20px;   

54.   height: 100px;   

55.   width: calc(100vw / 3);   

56.   height: calc(100vh / 4);   

57.   -webkit-animation: appear both;   

58.           animation: appear both;   

59. }   

60.   

61. .item:nth-child(1) {   

62.   background: #008a8a;   

63.   -webkit-animation-delay: 0.03333s !important;   

64.   -webkit-animation-duration: 0.1s !important;   

65. }   

66.   

67. .item:nth-child(2) {   

68.   background: #009494;   

69.   -webkit-animation-delay: 0.06667s !important;   

70.   -webkit-animation-duration: 0.2s !important;   

71. }   

72.   

73. .item:nth-child(3) {   

74.   background: #009f9f;   

75.   -webkit-animation-delay: 0.1s !important;   

76.   -webkit-animation-duration: 0.3s !important;   

77. }   

78.   

79. .item:nth-child(4) {   

80.   background: #00a9a9;   

81.   -webkit-animation-delay: 0.13333s !important;   

82.   -webkit-animation-duration: 0.4s !important;   

83. }   

84.   

85. .item:nth-child(5) {   

86.   background: #00b3b3;   

87.   -webkit-animation-delay: 0.16667s !important;   

88.   -webkit-animation-duration: 0.5s !important;   

89. }   

90.   

91. .item:nth-child(6) {   

92.   background: #00bdbd;   

93.   -webkit-animation-delay: 0.2s !important;   

94.   -webkit-animation-duration: 0.6s !important;   

95. }   

96.   

97. .item:nth-child(7) {   

98.   background: #00c7c7;   

99.   -webkit-animation-delay: 0.23333s !important;   

100.   -webkit-animation-duration: 0.7s !important;   

101. }   

102.   

103. .item:nth-child(8) {   

104.   background: #00d2d2;   

105.   -webkit-animation-delay: 0.26667s !important;   

106.   -webkit-animation-duration: 0.8s !important;   

107. }   

108.   

109. .item:nth-child(9) {   

110.   background: #00dcdc;   

111.   -webkit-animation-delay: 0.3s !important;   

112.   -webkit-animation-duration: 0.9s !important;   

113. }   

114.   

115. .item:nth-child(10) {   

116.   background: #00e6e6;   

117.   -webkit-animation-delay: 0.33333s !important;   

118.   -webkit-animation-duration: 1s !important;   

119. }   

120.   

121. .item:nth-child(11) {   

122.   background: #00f0f0;   

123.   -webkit-animation-delay: 0.36667s !important;   

124.   -webkit-animation-duration: 1.1s !important;   

125. }   

126.   

127. .item:nth-child(12) {   

128.   background: #00fafa;   

129.   -webkit-animation-delay: 0.4s !important;   

130.   -webkit-animation-duration: 1.2s !important;   

131. }   

132.   

133. @-webkit-keyframes appear {   

134.   from {   

135.     opacity: 0;   

136.     -webkit-transform: scale(0.8);   

137.             transform: scale(0.8);   

138.   }   

139.   to {   

140.     opacity: 1;   

141.     -webkit-transform: scale(1);   

142.             transform: scale(1);   

143.   }   

144. }   

145.   

146. @keyframes appear {   

147.   from {   

148.     opacity: 0;   

149.     -webkit-transform: scale(0.8);   

150.             transform: scale(0.8);   

151.   }   

152.   to {   

153.     opacity: 1;   

154.     -webkit-transform: scale(1);   

155.             transform: scale(1);   

156.   }   

157. }   

158. @-webkit-keyframes disappear {   

159.   from {   

160.     opacity: 1;   

161.     -webkit-transform: scale(1);   

162.             transform: scale(1);   

163.   }   

164.   to {   

165.     opacity: 0;   

166.     -webkit-transform: scale(0.9) rotateX(0deg) translateZ(-1500px);   

167.             transform: scale(0.9) rotateX(0deg) translateZ(-1500px);   

168.   }   

169. }   

170. @keyframes disappear {   

171.   from {   

172.     opacity: 1;   

173.     -webkit-transform: scale(1);   

174.             transform: scale(1);   

175.   }   

176.   to {   

177.     opacity: 0;   

178.     -webkit-transform: scale(0.9) rotateX(0deg) translateZ(-1500px);   

179.             transform: scale(0.9) rotateX(0deg) translateZ(-1500px);   

180.   }   

181. }  

感謝各位的閱讀，以上就是“如何實現基于css3的列表toggle特效”的內容了，經過本文的學習后，相信大家對如何實現基于css3的列表toggle特效這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！