css3アニメーション学習_html/css_WEB-ITnose

アニメーション効果は、主に css3 に新しく追加された属性 (変換、トランジション、アニメーション) を通じて、css3 で実現できます。

詳細な説明については、W3CSCHOOL を参照してください

以下はレンダリングです:

タブと同様に、入力がクリックされると、対応するコンテンツがアニメーション効果とともに表示されます。エリア。

HTML コード

1.   
2.   
3.   
4.    
6.   
8. body{
9. オーバーフロー: 非表示;  
10. }
12. .st-container {
13. 位置: 絶対;  
14. 幅: 100%;  
15. 高さ: 100%;  
16. トップ: 0;  
17. 左: 0;  
18. font-family: Arial、 sans-serif;  
19. }
21. /*固定位置を指定して「ナビゲーション」をページの上部に配置します*/
23. .st-container > 入力、
24. .st-container > {
25. 位置: 固定;  
26. トップ: 0;  
27. 幅: 20%;  
28. カーソル: ポインタ。  
29. font-size: 16px;  
30. 高さ: 34ピクセル;  
31. 行の高さ: 34px;  
32. }
34. .st-container > 入力 {
35. 不透明度: 0;  
36. z-index: 1000;  
37. }
39. .st-container > a {
40. z-index: 10;  
41. フォントの太さ: 700;  
42. 背景: #e23a6e;  
43. カラー: #fff;  
44. text-align: center;  
45. text-shadow: 1px 1px 1px rgba(151,24,64,0.2);  
46. テキスト装飾: なし。  
47. }
49. /*リンク要素と同じ 背景色になります:*/
50. .st-container:after {
51. content: '';  
52. 位置: 固定。  
53. 幅: 100%;  
54. 高さ: 34ピクセル;  
55. 背景: #e23a6e;  
56. z-index: 9;  
57. トップ: 0;  
58. }
60. /*入力とリンクのそれぞれの左の値を与える*/
61. #st-control-1, #st-control-1 + a {
62. 左: 0;  
63. }
65. #st-control-2, #st-control-2 + a {
66. 左: 20%;  
67. }
69. #st-control-3, #st-control-3 + a {
70. 左: 40%;  
71. }
73. #st-control-4, #st-control-4 + a {
74. 左: 60%;  
75. }
77. #st-control-5, #st-control-5 + a {
78. 左: 80%;  
79. }  
81. /*リンク要素の「選択された」状態を定義します。*/
82. .st-container > input:checked + a,
83. .st-container > input:checked:hover + a{
84. background: #821134;  
85. }
87. /*疑似クラスを使用して小さな三角形を追加:after し、同じ色を与えます:*/
89. .st-container > input:checked + a:after,
90. .st-container > input:checked:hover + a:after{
91. top: 100%;  
92. 境界線: 実線 透明。  
93. コンテンツ: '';  
94. 身長: 0;  
95. 幅: 0;  
96. 位置: 絶対。  
97. ポインターイベント: なし。  
98. border-top-color: #821134;  
99. ボーダー幅: 20px;  
100. 左: 50%;  
101. margin-left: -20px;  
102. }
104. /*リンク要素のホバー状態を定義します:*/
105. .st-container > input:hover + a{
106. background: #AD244F;  
107. }
109. .st-container > input:hover + a:after {
110. border-bottom-color: #AD244F;  
111. }
113. /*スクロールパネルスタイルの定義*/
115. .st-scroll,
116. .st-panel {
117. position: relative;  
118. 幅: 100%;  
119. 高さ: 100%;  
120. }
122. .st-scroll {
123. top: 0;  
124. 左: 0;  
125. -webkit-transition: すべて 0.6 秒のイーズインアウト。  
127. /* いくつかのハードウェアアクセラレーションを強制しましょう */
128. -webkit-transform: translate3d(0, 0, 0);  
129. -webkit-backface-visibility: 非表示;  
130. ボーダー: 実線 1px #ccc;  
131. }
133. .st-panel{
134. background: #fff;  
135. オーバーフロー: 非表示;  
136. }
138. /**チェックされたラジオ ボタンごとに、st-scroll ラッパーの位置を定義します。*/
140. #st-control-1:checked ~ .st-scroll {
141. -webkit-transform: translateY(0%);  
142. 背景色: 緑;  
143. }
144. #st-control-2:checked ~ .st-scroll {
145. -webkit-transform: translateY(-100%);  
146. 背景色: 緑;  
147. }
148. #st-control-3:checked ~ .st-scroll {
149. -webkit-transform: translateY(-200%);  
150. 背景色: 緑;  
151. }  
152. #st-control-4:checked ~ .st-scroll {
153. -webkit-transform: translateY(-300%);  
154. 背景色: 緑;  
155. }
156. #st-control-5:checked ~ .st-scroll {
157. -webkit-transform: translateY(-400%);  
158. 背景色: 緑;  
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 backward;  
167. }
169. /** スクロールパネルのアニメーションを定義する*/
170. @keyframes moveDown{
171. 0% {
172. -webkit-transform: translateY(-40px);   
173. 不透明度: 0;  
174. }
175. 100% {
176. -webkit-transform: translateY(0px);    
177. 不透明度: 1;  
178. }
179. }
181. .st-panel h2 {
182. color: #e23a6e;  
183. text-shadow: 1px 1px 1px rgba(151,24,64,0.2);  
184. 位置: 絶対。  
185. font-size: 54px;  
186. フォントの太さ: 900;  
187. 幅: 80%;  
188. 左: 10%;  
189. text-align: center;  
190. 行の高さ: 50px;  
191. マージン: -70px 0 0 0;  
192. パディング: 0;  
193. トップ: 50%;  
194. -webkit-backface-visibility: 非表示;  
195. }
197. .st-panel p {
198. 位置: 絶対;  
199. text-align: center;  
200. font-size: 16px;  
201. 行の高さ: 22px;  
202. カラー: #8b8b8b;  
203. z-index: 2;  
204. パディング: 0;  
205. 幅: 50%;  
206. 左: 25%;  
207. トップ: 50%;  
208. マージン: 10px 0 0 0;  
209. -webkit-backface-visibility: 非表示;  
210. }  
212.   
213.   
214.   
216.   
218.   
219. セレンディピティ  
220.   
221. 幸福  
222.   
223. 静けさ  
224.   
225. ポジティブ  
226.   
227. 情熱  
229.   
231.   
233.   

234. セレンディピティ

       

235. バンクシー、アディピシシング、エイウスモッド、バインミー、シード。 イカのスタンプタウン、奇妙な未来のニシ、コモド、mlkshk、ポップアップ、アジピシシング、レトロ。

       
236.   
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.