• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营

    • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    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. }  
    上一篇：一款利用html5和css3动画排列人物头像的实例演示
    下一篇：html5各种页面切换效果和模态对话框用法总结
  • 相关文章
    • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

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