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

佚名 2019/6/28 22:34:15

2014年的圣诞节即将来临之季。爱编程小编给大家分享一款2014年圣诞节倒计时网页,当天的日期卡片有抖动的效果。一起看下效果图:  鼠标点击5号前  鼠标点击5号后  实现的代码。  html代码:XML/HTML Code复制内容到剪贴板<h1> Merry Christmas<…

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

随时随地学软件编程-关注百度小程序和微信小程序
关于找一找教程网

本站文章仅代表作者观点,不代表本站立场,所有文章非营利性免费分享。
本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章,希望广大程序员努力学习,让我们用科技改变世界。
[2014年圣诞节倒计时网页的制作过程]http://www.zyiz.net/tech/detail-20731.html

上一篇:html5各种页面切换效果和模态对话框用法总结

下一篇:一款利用html5和css3动画排列人物头像的实例演示

赞(0)

共有 条评论 网友评论

验证码: 看不清楚?
    关注微信小程序
    程序员编程王-随时随地学编程

    扫描二维码或查找【程序员编程王】

    可以随时随地学编程啦!

    技术文章导航 更多>
    扫一扫关注最新编程教程