css3 animation 学习_html/css_WEB-ITnose

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

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

下面是效果图：

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

Html代码   

1.   
2.   
3.       
4.        
5.   
7.       
8. body{  
9.     overflow: hidden;  
10. }  
11.   
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. }  
20.   
21. /*put the “navigation” at the top of the page by giving it a fixed position*/  
22.   
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. }  
33.    
34. .st-container > input {  
35.     opacity: 0;  
36.     z-index: 1000;  
37. }  
38.    
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. }  
48.   
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. }  
59.   
60. /*give input and links  respective left values*/  
61. #st-control-1, #st-control-1 + a {  
62.     left: 0;  
63. }  
64.    
65. #st-control-2, #st-control-2 + a {  
66.     left: 20%;  
67. }  
68.    
69. #st-control-3, #st-control-3 + a {  
70.     left: 40%;  
71. }  
72.    
73. #st-control-4, #st-control-4 + a {  
74.     left: 60%;  
75. }  
76.    
77. #st-control-5, #st-control-5 + a {  
78.     left: 80%;  
79. }  
80.   
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. }  
86.   
87. /*add a little triangle using the pseudo-class :after and give it the same color:*/  
88.   
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. }  
103.   
104. /*define a hover state for the link element:*/  
105. .st-container > input:hover + a{  
106.     background: #AD244F;  
107. }  
108.    
109. .st-container > input:hover + a:after {  
110.     border-bottom-color: #AD244F;  
111. }  
112.   
113. /*define scroll panel style*/  
114.   
115. .st-scroll,  
116. .st-panel {  
117.     position: relative;  
118.     width: 100%;  
119.     height: 100%;  
120. }  
121.    
122. .st-scroll {  
123.     top: 0;  
124.     left: 0;  
125.     -webkit-transition: all 0.6s ease-in-out;  
126.        
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. }  
132.    
133. .st-panel{  
134.     background: #fff;  
135.     overflow: hidden;  
136. }   
137.   
138. /**define the positions for the st-scroll wrapper for each checked radio button*/  
139.   
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. }  
160.   
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. }  
168.   
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. }  
180.   
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. }  
196.   
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. }  
211.   
212.   
213.   
214.           
215.           
216.               
217.               
218.                   
219.                 Serendipity  
220.                   
221.                 Happiness  
222.                   
223.                 Tranquillity  
224.                   
225.                 Positivity  
226.                   
227.                 Passion  
228.                   
229.                   
230.                   
231.                       
232.                       
233.                     
       
234.                         

     Serendipity

       
235.                         

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

       
236.                       
237.                       
238.                     
       
239.                         

     Happiness

       
240.                         

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

       
241.                       
242.                       
243.                     
       
244.                         

     Tranquillity

       
245.                         

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

       
246.                       
247.                       
248.                     
       
249.                         

     Positivity

       
250.                         

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

       
251.                       
252.                       
253.                     
       
254.                         

     Passion

       
255.                         

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

       
256.                       
257.   
258.                 
  
259.                   
260.             
  
261.               
262.         
  
263.   
264.