一起看下效果图:

　　鼠标点击5号前

　　鼠标点击5号后

　　实现的代码。

　　html代码:

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

1. <h2>

2. MerryChristmas</h2>

3. <ul>

4. <li>

5. <pclass="door">

6. 1</p>

7. </li>

8. <li>

9. <pclass="door">

10. 2</p>

11. </li>

12. <li>

13. <pclass="door">

14. 3</p>

15. </li>

16. <li>

17. <pclass="door">

18. 4</p>

19. </li>

20. <li>

21. <pclass="door">

22. 5</p>

23. </li>

24. <li>

25. <pclass="door">

26. 6</p>

27. </li>

28. <li>

29. <pclass="door">

30. 7</p>

31. </li>

32. <li>

33. <pclass="door">

34. 8</p>

35. </li>

36. <li>

37. <pclass="door">

38. 9</p>

39. </li>

40. <li>

41. <pclass="door">

42. 10</p>

43. </li>

44. <li>

45. <pclass="door">

46. 11</p>

47. </li>

48. <li>

49. <pclass="door">

50. 12</p>

51. </li>

52. <li>

53. <pclass="door">

54. 13</p>

55. </li>

56. <li>

57. <pclass="door">

58. 14</p>

59. </li>

60. <li>

61. <pclass="door">

62. 15</p>

63. </li>

64. <li>

65. <pclass="door">

66. 16</p>

67. </li>

68. <li>

69. <pclass="door">

70. 17</p>

71. </li>

72. <li>

73. <pclass="door">

74. 18</p>

75. </li>

76. <li>

77. <pclass="door">

78. 19</p>

79. </li>

80. <li>

81. <pclass="door">

82. 20</p>

83. </li>

84. <li>

85. <pclass="door">

86. 21</p>

87. </li>

88. <li>

89. <pclass="door">

90. 22</p>

91. </li>

92. <li>

93. <pclass="door">

94. 23</p>

95. </li>

96. <li>

97. <pclass="door">

98. 24</p>

99. </li>

100. <li>

101. <pclass="door">

102. 25</p>

103. </li>

104. </ul>

105. <pid="message">

106. </p>

　　css3代码:

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

1. body{

2. background:url("xmas.jpg");

3. color:#fff;

4. font-family:'OleoScript',cursive;

5. padding:20px;

6. font-weight:400;

7. }

9. h2{

10. margin:0;

11. font-size:75px;

12. line-height:75px;

13. text-align:center;

14. font-weight:400;

15. }

17. ul{

18. margin:0auto30pxauto;

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:25px12px;

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:all0.4sease-in-out;

47. }

49. ulli:last-child{

51. background-size:cover;

52. display:block;

53. clear:both;

54. margin:20pxauto0auto;

55. width:200px;

56. height:275px;

57. }

59. ulli:last-child.door{

60. font-size:100px;

61. width:200px;

62. height:275px;

63. line-height:240px;

64. }

66. ulli: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#eeedashed;

80. border-right:2px#eeedashed;

81. border-bottom:2px#eeedashed;

82. border-left:1px#eeesolid;

83. border-radius:6px;

84. padding:15px;

85. width:130px;

86. height:130px;

87. transform-origin:040%;

88. transition:all0.4sease-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:0auto;

115. }

117. .open{

118. box-shadow:14px0px15px-1pxrgba(0,0,0,0.2);

119. color:#91c1cc;

120. transform:rotate3d(0,1,0,-98deg);

121. }

123. .jiggle{

124. animation:jiggle0.2sinfinite;

125. transform:rotate(-1deg);

126. }

128. @keyframesjiggle{

129. 0%{

130. transform:rotate(-1deg);

131. }

132. 50%{

133. transform:rotate(1deg);

134. }

135. }

137. @mediascreenand(min-width:480px){

138. li{

139. margin:25px20px;

140. }

141. }

144. @mediascreenand(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. }

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