溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

如何制作2014年圣誕節(jié)倒計時網(wǎng)頁

發(fā)布時間：2021-09-28 16:04:45 來源：億速云 閱讀：200 作者：iii 欄目：web開發(fā)

這篇文章主要介紹“如何制作2014年圣誕節(jié)倒計時網(wǎng)頁”，在日常操作中，相信很多人在如何制作2014年圣誕節(jié)倒計時網(wǎng)頁問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”如何制作2014年圣誕節(jié)倒計時網(wǎng)頁”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

一起看下效果圖：

如何制作2014年圣誕節(jié)倒計時網(wǎng)頁

　　鼠標點擊5號前

如何制作2014年圣誕節(jié)倒計時網(wǎng)頁

　　鼠標點擊5號后

　　實現(xiàn)的代碼。

　　html代碼：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

  1. <h2>  

  2.         Merry Christmas</h2>  

  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復(fù)制內(nèi)容到剪貼板

  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. h2 {   

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

到此，關(guān)于“如何制作2014年圣誕節(jié)倒計時網(wǎng)頁”的學習就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手