如何制作2014年圣诞节倒计时网页

这篇文章主要介绍“如何制作2014年圣诞节倒计时网页”，在日常操作中，相信很多人在如何制作2014年圣诞节倒计时网页问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”如何制作2014年圣诞节倒计时网页”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

一起看下效果图：

　　鼠标点击5号前

　　鼠标点击5号后

　　实现的代码。

　　html代码：

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

1. <h2>  

2.         Merry Christmas</h2>  

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. h2 {   

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

到此，关于“如何制作2014年圣诞节倒计时网页”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！