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

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