2014年圣诞节倒计时网页的制作过程_html5教程技巧

　　2014年的圣诞节即将来临之季。爱编程小编给大家分享一款2014年圣诞节倒计时网页，当天的日期卡片有抖动的效果。一起看下效果图：

　　鼠标点击5号前

　　鼠标点击5号后

　　实现的代码。

　　html代码：

XML/HTML Code复制内容到剪贴板

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

　　css3代码：

C/C++ Code复制内容到剪贴板

1. body {
2. background: url("xmas.jpg");
3. color: #fff;
4. font-family: 'Oleo Script', cursive;
5. padding: 20px;
6. font-weight: 400;
7. }
9. h1 {
10. margin:0;
11. font-size:75px;
12. line-height: 75px;
13. text-align: center;
14. font-weight: 400;
15. }
17. ul {
18. margin:0 auto 30px auto;
19. padding:0;
20. list-style-type:none;
21. max-width:900px;
22. width: 100%;
23. text-align: center;
24. user-select: none;
25. }
27. li {
28. font-weight: 400;
29. background-color: #fff;
30. box-sizing: border-box;
31. border-radius: 6px;
32. display: inline-block;
33. color:#111;
34. cursor:pointer;
35. font-size: 26px;
36. padding:15px;
37. margin:25px 12px;
38. width: 130px;
39. height:130px;
40. line-height: 100px;
41. text-align:center;
42. position: relative;
43. vertical-align:top;
44. user-select: none;
45. perspective: 800px;
46. transition: all 0.4s ease-in-out;
47. }
49. ul li:last-child {
51. background-size:cover;
52. display:block;
53. clear:both;
54. margin: 20px auto 0 auto;
55. width: 200px;
56. height: 275px;
57. }
59. ul li:last-child .door {
60. font-size: 100px;
61. width: 200px;
62. height: 275px;
63. line-height: 240px;
64. }
66. ul li:last-child .revealed {
67. line-height: 123px;
68. }
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. }
92. .current .door {
93. background-color: #7EAD44;
94. }
96. .current .door.open{
97. color: #7EAD44;
98. }
100. .revealed {
101. user-select: none;
102. }
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. }
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. }
123. .jiggle {
124. animation: jiggle 0.2s infinite;
125. transform: rotate(-1deg);
126. }
128. @keyframes jiggle {
129. 0% {
130. transform: rotate(-1deg);
131. }
132. 50% {
133. transform: rotate(1deg);
134. }
135. }
137. @media screen and (min-width: 480px) {
138. li {
139. margin:25px 20px;
140. }
141. }
144. @media screen and (min-width: 768px) {
145. body {
146. background-size:150px;
147. }
149. p {
150. right: 6%;
151. top: 20%;
152. bottom: auto;
153. margin-left: auto;
154. left: auto;
155. }
156. }