搜索
热搜： 编程 Python Microsoft 编程语言 C++
首页> 前端开发 > HTML5 > 正文

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

发布时间：2023-01-01 17:19:35 来源：网络
.
秋天，稻田里的稻谷已经成熟了，一眼看去，好像铺了一地的金子，而农民伯伯们一个接一个到自己的田里捡金子。微风吹过，金色的海洋掀起一层层麦浪。

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

　　鼠标点击5号前

　　鼠标点击5号后

　　实现的代码。

　　html代码：

XML/HTML Code复制内容到剪贴板
  1. <h1>
  2. MerryChristmas</h1>
  3. <ul>
  4. <li>
  5. <divclass="door">
  6. 1</div>
  7. </li>
  8. <li>
  9. <divclass="door">
  10. 2</div>
  11. </li>
  12. <li>
  13. <divclass="door">
  14. 3</div>
  15. </li>
  16. <li>
  17. <divclass="door">
  18. 4</div>
  19. </li>
  20. <li>
  21. <divclass="door">
  22. 5</div>
  23. </li>
  24. <li>
  25. <divclass="door">
  26. 6</div>
  27. </li>
  28. <li>
  29. <divclass="door">
  30. 7</div>
  31. </li>
  32. <li>
  33. <divclass="door">
  34. 8</div>
  35. </li>
  36. <li>
  37. <divclass="door">
  38. 9</div>
  39. </li>
  40. <li>
  41. <divclass="door">
  42. 10</div>
  43. </li>
  44. <li>
  45. <divclass="door">
  46. 11</div>
  47. </li>
  48. <li>
  49. <divclass="door">
  50. 12</div>
  51. </li>
  52. <li>
  53. <divclass="door">
  54. 13</div>
  55. </li>
  56. <li>
  57. <divclass="door">
  58. 14</div>
  59. </li>
  60. <li>
  61. <divclass="door">
  62. 15</div>
  63. </li>
  64. <li>
  65. <divclass="door">
  66. 16</div>
  67. </li>
  68. <li>
  69. <divclass="door">
  70. 17</div>
  71. </li>
  72. <li>
  73. <divclass="door">
  74. 18</div>
  75. </li>
  76. <li>
  77. <divclass="door">
  78. 19</div>
  79. </li>
  80. <li>
  81. <divclass="door">
  82. 20</div>
  83. </li>
  84. <li>
  85. <divclass="door">
  86. 21</div>
  87. </li>
  88. <li>
  89. <divclass="door">
  90. 22</div>
  91. </li>
  92. <li>
  93. <divclass="door">
  94. 23</div>
  95. </li>
  96. <li>
  97. <divclass="door">
  98. 24</div>
  99. </li>
  100. <li>
  101. <divclass="door">
  102. 25</div>
  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. 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: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年圣诞节倒计时网页的制作过程。生活充满了选择，而生活的态度就是一切。更多关于2014年圣诞节倒计时网页的制作过程请关注haodaima.com其它相关文章！

标签： 制作过程
关于好代码 | 联系方式 | 版权声明 | 合作赞助 | 网站地图