検索

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

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

WBOY
WBOYオリジナル
2016-05-16 15:47:071552ブラウズ

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

関連記事

続きを見る