首页前端开发HTML2014年圣诞节倒计时网页的制作过程

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

时间2024-01-24 13:46:33发布访客分类HTML浏览223
导读：收集整理的这篇文章主要介绍了2014年圣诞节倒计时网页的制作过程，觉得挺不错的，现在分享给大家，也给大家做个参考。 2014年的圣诞节即将来临之季。爱编程小编给大家分享一款2014年圣诞节倒计时网页，当天的日期卡片有抖动的效果...
收集整理的这篇文章主要介绍了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. }   

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！

圣诞节

若转载请注明出处： 2014年圣诞节倒计时网页的制作过程
本文地址： https://pptw.com/jishu/585445.html
html5各种页面切换效果和模态对话框用法总结 利用HTML5中的Canvas绘制一张笑脸的教程

游客 回复需填写必要信息
↑