css3 animation 学习_html/css_WEB-ITnose

css3中可以实现动画效果，主要是通过css3中新增加的属性(transform , transition,animation )来完成。

他们的详细解释可以参考 W3CSCHOOL

下面是效果图：

类似于tab选项卡，当点击某个input的时候，就以动画的效果来显示对应的内容区域。

Html代码

8. body{
9. overflow: hidden;
10. }
12. .st-container {
13. position: absolute;
14. width: 100%;
15. height: 100%;
16. top: 0;
17. left: 0;
18. font-family: Arial, sans-serif;
19. }
21. /*put the “navigation” at the top of the page by giving it a fixed position*/
23. .st-container > input,
24. .st-container > a {
25. position: fixed;
26. top: 0;
27. width: 20%;
28. cursor: pointer;
29. font-size: 16px;
30. height: 34px;
31. line-height: 34px;
32. }
34. .st-container > input {
35. opacity: 0;
36. z-index: 1000;
37. }
39. .st-container > a {
40. z-index: 10;
41. font-weight: 700;
42. background: #e23a6e;
43. color: #fff;
44. text-align: center;
45. text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
46. text-decoration: none;
47. }
49. /*It will have the same background color like the link elements:*/
50. .st-container:after {
51. content: '';
52. position: fixed;
53. width: 100%;
54. height: 34px;
55. background: #e23a6e;
56. z-index: 9;
57. top: 0;
58. }
60. /*give input and links respective left values*/
61. #st-control-1, #st-control-1 + a {
62. left: 0;
63. }
65. #st-control-2, #st-control-2 + a {
66. left: 20%;
67. }
69. #st-control-3, #st-control-3 + a {
70. left: 40%;
71. }
73. #st-control-4, #st-control-4 + a {
74. left: 60%;
75. }
77. #st-control-5, #st-control-5 + a {
78. left: 80%;
79. }
81. /*define a “selected” state for the link elements.*/
82. .st-container > input:checked + a,
83. .st-container > input:checked:hover + a{
84. background: #821134;
85. }
87. /*add a little triangle using the pseudo-class :after and give it the same color:*/
89. .st-container > input:checked + a:after,
90. .st-container > input:checked:hover + a:after{
91. top: 100%;
92. border: solid transparent;
93. content: '';
94. height: 0;
95. width: 0;
96. position: absolute;
97. pointer-events: none;
98. border-top-color: #821134;
99. border-width: 20px;
100. left: 50%;
101. margin-left: -20px;
102. }
104. /*define a hover state for the link element:*/
105. .st-container > input:hover + a{
106. background: #AD244F;
107. }
109. .st-container > input:hover + a:after {
110. border-bottom-color: #AD244F;
111. }
113. /*define scroll panel style*/
115. .st-scroll,
116. .st-panel {
117. position: relative;
118. width: 100%;
119. height: 100%;
120. }
122. .st-scroll {
123. top: 0;
124. left: 0;
125. -webkit-transition: all 0.6s ease-in-out;
127. /* Let's enforce some hardware acceleration */
128. -webkit-transform: translate3d(0, 0, 0);
129. -webkit-backface-visibility: hidden;
130. border: solid 1px #ccc;
131. }
133. .st-panel{
134. background: #fff;
135. overflow: hidden;
136. }
138. /**define the positions for the st-scroll wrapper for each checked radio button*/
140. #st-control-1:checked ~ .st-scroll {
141. -webkit-transform: translateY(0%);
142. background-color: green;
143. }
144. #st-control-2:checked ~ .st-scroll {
145. -webkit-transform: translateY(-100%);
146. background-color: green;
147. }
148. #st-control-3:checked ~ .st-scroll {
149. -webkit-transform: translateY(-200%);
150. background-color: green;
151. }
152. #st-control-4:checked ~ .st-scroll {
153. -webkit-transform: translateY(-300%);
154. background-color: green;
155. }
156. #st-control-5:checked ~ .st-scroll {
157. -webkit-transform: translateY(-400%);
158. background-color: green;
159. }
161. #st-control-1:checked ~ .st-scroll #st-panel-1 h2,
162. #st-control-2:checked ~ .st-scroll #st-panel-2 h2,
163. #st-control-3:checked ~ .st-scroll #st-panel-3 h2,
164. #st-control-4:checked ~ .st-scroll #st-panel-4 h2,
165. #st-control-5:checked ~ .st-scroll #st-panel-5 h2{
166. -webkit-animation: moveDown 1.6s ease-in-out 1.2s backwards;
167. }
169. /** define animation for the scroll panel*/
170. @keyframes moveDown{
171. 0% {
172. -webkit-transform: translateY(-40px);
173. opacity: 0;
174. }
175. 100% {
176. -webkit-transform: translateY(0px);
177. opacity: 1;
178. }
179. }
181. .st-panel h2 {
182. color: #e23a6e;
183. text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
184. position: absolute;
185. font-size: 54px;
186. font-weight: 900;
187. width: 80%;
188. left: 10%;
189. text-align: center;
190. line-height: 50px;
191. margin: -70px 0 0 0;
192. padding: 0;
193. top: 50%;
194. -webkit-backface-visibility: hidden;
195. }
197. .st-panel p {
198. position: absolute;
199. text-align: center;
200. font-size: 16px;
201. line-height: 22px;
202. color: #8b8b8b;
203. z-index: 2;
204. padding: 0;
205. width: 50%;
206. left: 25%;
207. top: 50%;
208. margin: 10px 0 0 0;
209. -webkit-backface-visibility: hidden;
210. }
219. Serendipity
221. Happiness
223. Tranquillity
225. Positivity
227. Passion

234. Serendipity

235. Banksy adipisicing eiusmod banh mi sed. Squid stumptown est odd future nisi, commodo mlkshk pop-up adipisicing retro.

239. Happiness

240. Art party readymade beard labore cosby sweater culpa. Art party whatever incididunt, scenester umami polaroid tofu.

244. Tranquillity

245. Sint aute occaecat id vice. Post-ironic fap pork belly next level godard, id fanny pack williamsburg forage truffaut.

249. Positivity

250. Mixtape fap leggings art party, butcher authentic farm-to-table you probably haven't heard of them do labore cosby sweater.

254. Passion

255. Fixie ad odd future polaroid dreamcatcher, nesciunt carles bicycle rights accusamus mcsweeney's mumblecore nulla irony.