ホームページ > ウェブフロントエンド > H5 チュートリアル > 2014 クリスマス カウントダウンの制作プロセス webpage_html5 チュートリアル スキル

2014 クリスマス カウントダウンの制作プロセス webpage_html5 チュートリアル スキル

WBOY
リリース: 2016-05-16 15:47:07
オリジナル
1560 人が閲覧しました

2014年のクリスマスシーズンがやって来ます。 iCoding の編集者が、2014 年のクリスマス カウントダウン Web ページを共有します。その日の日付カードには震える効果があります。レンダリングを見てみましょう:

5 番の前でマウスをクリックします

5番をクリック後

実装コード。

htmlコード:

XML/HTML コードコンテンツをクリップボードにコピー
  1. <h1>
  2. メリー クリスマスh1>
  3. <ul>
  4. <li>
  5. <div class="ドア" >
  6. 1div>
  7. li>
  8. <li>
  9. <div class="ドア" >
  10. 2div>
  11. li>
  12. <li>
  13. <div class="ドア" >
  14. 3div>
  15. li>
  16. <li>
  17. <div class="ドア" >
  18. 4div>
  19. li>
  20. <li>
  21. <div class="ドア" >
  22. 5div>
  23. li>
  24. <li>
  25. <div class="ドア" >
  26. 6div>
  27. li>
  28. <li>
  29. <div class="ドア" >
  30. 7div>
  31. li>
  32. <li>
  33. <div class="ドア" >
  34. 8div>
  35. li>
  36. <li>
  37. <div class="ドア" >
  38. 9div>
  39. li>
  40. <li>
  41. <div class="ドア" >
  42. 10div>
  43. li>
  44. <li>
  45. <div class="ドア" >
  46. 11div>
  47. li>
  48. <li>
  49. <div class="ドア" >
  50. 12div>
  51. li>
  52. <li>
  53. <div class="ドア" >
  54. 13div>
  55. li>
  56. <li>
  57. <div class="ドア" >
  58. 14div>
  59. li>
  60. <li>
  61. <div class="ドア" >
  62. 15div>
  63. li>
  64. <li>
  65. <div class="ドア" >
  66. 16div>
  67. li>
  68. <li>
  69. <div class="ドア" >
  70. 17div>
  71. li>
  72. <li>
  73. <div class="ドア" >
  74. 18div>
  75. li>
  76. <li>
  77. <div class="ドア" >
  78. 19div>
  79. li>
  80. <li>
  81. <div class="ドア" >
  82. 20div>
  83. li>
  84. <li>
  85. <div class="ドア" >
  86. 21div>
  87. li>
  88. <li>
  89. <div class="ドア" >
  90. 22div>
  91. li>
  92. <li>
  93. <div class="ドア" >
  94. 23div>
  95. li>
  96. <li>
  97. <div class="ドア" >
  98. 24div>
  99. li>
  100. <li>
  101. <div class="ドア" >
  102. 25div>
  103. li>
  104. ul>
  105. <p id="メッセージ" >
  106. p>

css3代码:

C/C コード剪贴板への复制内容
  1. ボディ {
  2. 背景: url("xmas.jpg");   
  3. 色: #fff;   
  4. font-family: 'Oleo Script'、筆記体;   
  5. パディング: 20px;   
  6. font-weight: 400;   
  7. }
  8. h1 {
  9. マージン:0;   
  10. font-size:75px;   
  11. 行の高さ: 75px;   
  12. text-align: center;   
  13. font-weight: 400;   
  14. }
  15. ul {
  16. マージン:0 自動 30ピクセル 自動;   
  17. パディング:0;   
  18. list-style-type:none;   
  19. 最大幅:900px;   
  20. 幅: 100%;   
  21. text-align: center;   
  22. ユーザー選択: なし。   
  23. }
  24. リ {
  25. font-weight: 400;   
  26. 背景色: #fff;   
  27. box-sizing: border-box;   
  28. border-radius: 6px;   
  29. 表示: インライン-ブロック;   
  30. カラー:#111;   
  31. カーソル:ポインタ;   
  32. font-size: 26px;   
  33. パディング:15px;   
  34. マージン:25px 12px;   
  35. 幅: 130ピクセル;   
  36. 高さ:130px;   
  37. 行の高さ: 100px;   
  38. text-align:center;   
  39. 位置: 相対。   
  40. vertical-align:top;   
  41. ユーザー選択: なし。   
  42. パースペクティブ: 800px;   
  43. トランジション: すべて 0.4 秒 イーズインアウト。   
  44. }
  45. ul li:last-child {
  46. 背景サイズ:カバー;     
  47. 表示:ブロック;   
  48. クリア:両方;   
  49. マージン: 20px 自動 0 自動;   
  50. 幅: 200ピクセル;   
  51. 高さ: 275px;   
  52. }
  53. ul li:last-child .door {
  54. font-size: 100px;   
  55. 幅: 200ピクセル;   
  56. 高さ: 275px;   
  57. 行の高さ: 240px;   
  58. }  
  59.   
  60. ul li:last-child .revealed {   
  61.   line-height: 123px;   
  62. }   
  63.   
  64. .door {   
  65.   user-select: none;   
  66.   color:#fff;   
  67.   font-size: 70px;   
  68.   position: absolute;   
  69.   top:0;   
  70.   left:0;   
  71.   background-color: #91c1cc;   
  72.   box-sizing: border-box;   
  73.   border-top: 2px #eee dashed;   
  74.   border-right: 2px #eee dashed;   
  75.   border-bottom: 2px #eee dashed;   
  76.   border-left: 1px #eee solid;   
  77.   border-radius: 6px;   
  78.   padding:15px;   
  79.   width: 130px;   
  80.   height:130px;   
  81.   transform-origin: 0 40%;    
  82.   transition: all 0.4s ease-in-out;   
  83.   transform-style: preserve-3d;   
  84. }   
  85.   
  86. .current .door {   
  87.   background-color: #7EAD44;   
  88. }   
  89.   
  90. .current .door.open{   
  91.   color: #7EAD44;   
  92. }   
  93.   
  94. .revealed {   
  95.   user-select: none;   
  96. }   
  97.   
  98. #message {   
  99.   box-sizing: border-box;   
  100.   color: #222;   
  101.   display: none;   
  102.   font-size: 24px;   
  103.   padding: 20px;   
  104.   background: #eddecb;   
  105.   max-width: 500px;   
  106.   width: 100%;   
  107.   border-radius: 15px;   
  108.   margin: 0 auto;   
  109. }   
  110.   
  111. .open {   
  112.   box-shadow: 14px 0px 15px -1px rgba(0,0,0,0.2);   
  113.   color: #91c1cc;   
  114.   transform: rotate3d(0, 1, 0, -98deg);   
  115. }   
  116.   
  117. .jiggle {   
  118.   animation: jiggle 0.2s infinite;   
  119.   transform: rotate(-1deg);   
  120. }   
  121.   
  122. @keyframes jiggle {   
  123.   0% {   
  124.         transform: rotate(-1deg);   
  125.   }  
  126.   50% {   
  127.       transform: rotate(1deg);   
  128.   }   
  129. }   
  130.   
  131. @media screen and (min-width: 480px) {   
  132.   li {   
  133.     margin:25px 20px;   
  134.   }   
  135. }   
  136.   
  137.   
  138. @media screen and (min-width: 768px) {   
  139.     body {   
  140.         background-size:150px;   
  141.     }   
  142.        
  143.     p {   
  144.         right: 6%;   
  145.         top: 20%;   
  146.         bottom: auto;    
  147.         margin-left: auto;   
  148.         left: auto;   
  149.     }   
  150. }  
関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート