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

秋天,稻田里的稻谷已经成熟了,一眼看去,好像铺了一地的金子,而农民伯伯们一个接一个到自己的田里捡金子。微风吹过,金色的海洋掀起一层层麦浪。

  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. }
  8. h1{
  9. margin:0;
  10. font-size:75px;
  11. line-height:75px;
  12. text-align:center;
  13. font-weight:400;
  14. }
  15. ul{
  16. margin:0auto30pxauto;
  17. padding:0;
  18. list-style-type:none;
  19. max-width:900px;
  20. width:100%;
  21. text-align:center;
  22. user-select:none;
  23. }
  24. li{
  25. font-weight:400;
  26. background-color:#fff;
  27. box-sizing:border-box;
  28. border-radius:6px;
  29. display:inline-block;
  30. color:#111;
  31. cursor:pointer;
  32. font-size:26px;
  33. padding:15px;
  34. margin:25px12px;
  35. width:130px;
  36. height:130px;
  37. line-height:100px;
  38. text-align:center;
  39. position:relative;
  40. vertical-align:top;
  41. user-select:none;
  42. perspective:800px;
  43. transition:all0.4sease-in-out;
  44. }
  45. ulli:last-child{
  46. background-size:cover;
  47. display:block;
  48. clear:both;
  49. margin:20pxauto0auto;
  50. width:200px;
  51. height:275px;
  52. }
  53. ulli:last-child.door{
  54. font-size:100px;
  55. width:200px;
  56. height:275px;
  57. line-height:240px;
  58. }
  59. ulli:last-child.revealed{
  60. line-height:123px;
  61. }
  62. .door{
  63. user-select:none;
  64. color:#fff;
  65. font-size:70px;
  66. position:absolute;
  67. top:0;
  68. left:0;
  69. background-color:#91c1cc;
  70. box-sizing:border-box;
  71. border-top:2px#eeedashed;
  72. border-right:2px#eeedashed;
  73. border-bottom:2px#eeedashed;
  74. border-left:1px#eeesolid;
  75. border-radius:6px;
  76. padding:15px;
  77. width:130px;
  78. height:130px;
  79. transform-origin:040%;
  80. transition:all0.4sease-in-out;
  81. transform-style:preserve-3d;
  82. }
  83. .current.door{
  84. background-color:#7EAD44;
  85. }
  86. .current.door.open{
  87. color:#7EAD44;
  88. }
  89. .revealed{
  90. user-select:none;
  91. }
  92. #message{
  93. box-sizing:border-box;
  94. color:#222;
  95. display:none;
  96. font-size:24px;
  97. padding:20px;
  98. background:#eddecb;
  99. max-width:500px;
  100. width:100%;
  101. border-radius:15px;
  102. margin:0auto;
  103. }
  104. .open{
  105. box-shadow:14px0px15px-1pxrgba(0,0,0,0.2);
  106. color:#91c1cc;
  107. transform:rotate3d(0,1,0,-98deg);
  108. }
  109. .jiggle{
  110. animation:jiggle0.2sinfinite;
  111. transform:rotate(-1deg);
  112. }
  113. @keyframesjiggle{
  114. 0%{
  115. transform:rotate(-1deg);
  116. }
  117. 50%{
  118. transform:rotate(1deg);
  119. }
  120. }
  121. @mediascreenand(min-width:480px){
  122. li{
  123. margin:25px20px;
  124. }
  125. }
  126. @mediascreenand(min-width:768px){
  127. body{
  128. background-size:150px;
  129. }
  130. p{
  131. right:6%;
  132. top:20%;
  133. bottom:auto;
  134. margin-left:auto;
  135. left:auto;
  136. }
  137. }

以上就是2014年圣诞节倒计时网页的制作过程。生活充满了选择,而生活的态度就是一切。更多关于2014年圣诞节倒计时网页的制作过程请关注haodaima.com其它相关文章!