ホームページ >ウェブフロントエンド >htmlチュートリアル >css3アニメーション学習_html/css_WEB-ITnose

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

WBOY
WBOYオリジナル
2016-06-24 11:53:421270ブラウズ

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

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

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

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

HTML コード

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

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

      
  201.   
  202.                     
      
  203.                         

    Happiness

      
  204.                         

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

      
  205.                       
  206.                       
  207.                     
      
  208.                         

    Tranquillity

      
  209.                         

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

      
  210.                       
  211.                       
  212.                     
      
  213.                         

    Positivity

      
  214.                         

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

      
  215.                       
  216.                       
  217.                     
      
  218.                         

    Passion

      
  219.                         

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

      
  220.                       
  221.   
  222.                 
  
  •                   
  •             
  •   
  •   
  •   
  •   
  • 声明:
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    前の記事:レスポンシブ WEB デザインの 9 つの基本原則_html/css_WEB-ITnose次の記事:レスポンシブ WEB デザインの 9 つの基本原則_html/css_WEB-ITnose

    関連記事

    続きを見る