2014年圣诞节倒计时网页的制作过程

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

鼠标点击5号前

鼠标点击5号后

实现的代码。

html代码：

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

1. <h1>  
2.         Merry Christmas</h1>  
3.     <ul>  
4.         <li>  
5.             <div class="door">  
6.                 1</div>  
7.         </li>  
8.         <li>  
9.             <div class="door">  
10.                 2</div>  
11.         </li>  
12.         <li>  
13.             <div class="door">  
14.                 3</div>  
15.         </li>  
16.         <li>  
17.             <div class="door">  
18.                 4</div>  
19.         </li>  
20.         <li>  
21.             <div class="door">  
22.                 5</div>  
23.         </li>  
24.         <li>  
25.             <div class="door">  
26.                 6</div>  
27.         </li>  
28.         <li>  
29.             <div class="door">  
30.                 7</div>  
31.         </li>  
32.         <li>  
33.             <div class="door">  
34.                 8</div>  
35.         </li>  
36.         <li>  
37.             <div class="door">  
38.                 9</div>  
39.         </li>  
40.         <li>  
41.             <div class="door">  
42.                 10</div>  
43.         </li>  
44.         <li>  
45.             <div class="door">  
46.                 11</div>  
47.         </li>  
48.         <li>  
49.             <div class="door">  
50.                 12</div>  
51.         </li>  
52.         <li>  
53.             <div class="door">  
54.                 13</div>  
55.         </li>  
56.         <li>  
57.             <div class="door">  
58.                 14</div>  
59.         </li>  
60.         <li>  
61.             <div class="door">  
62.                 15</div>  
63.         </li>  
64.         <li>  
65.             <div class="door">  
66.                 16</div>  
67.         </li>  
68.         <li>  
69.             <div class="door">  
70.                 17</div>  
71.         </li>  
72.         <li>  
73.             <div class="door">  
74.                 18</div>  
75.         </li>  
76.         <li>  
77.             <div class="door">  
78.                 19</div>  
79.         </li>  
80.         <li>  
81.             <div class="door">  
82.                 20</div>  
83.         </li>  
84.         <li>  
85.             <div class="door">  
86.                 21</div>  
87.         </li>  
88.         <li>  
89.             <div class="door">  
90.                 22</div>  
91.         </li>  
92.         <li>  
93.             <div class="door">  
94.                 23</div>  
95.         </li>  
96.         <li>  
97.             <div class="door">  
98.                 24</div>  
99.         </li>  
100.         <li>  
101.             <div class="door">  
102.                 25</div>  
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. }   
8.   
9. h1 {   
10.   margin:0;   
11.   font-size:75px;   
12.   line-height: 75px;   
13.   text-align: center;   
14.   font-weight: 400;   
15. }   
16.   
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. }   
26.   
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. }   
48.   
49. ul li:last-child {   
50.   
51.   background-size:cover;     
52.   display:block;   
53.   clear:both;   
54.   margin: 20px auto 0 auto;   
55.   width: 200px;   
56.   height: 275px;   
57. }   
58.   
59. ul li:last-child .door {   
60.   font-size: 100px;   
61.   width: 200px;   
62.   height: 275px;   
63.   line-height: 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. }