如何實現(xiàn)圣誕節(jié)倒計時頁面特效

這篇文章主要講解了“如何實現(xiàn)圣誕節(jié)倒計時頁面特效”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“如何實現(xiàn)圣誕節(jié)倒計時頁面特效”吧！

一起看下效果圖：

實現(xiàn)的代碼。

html代碼：

代碼如下:

<h2>
       Merry Christmas</h2>
   <ul>
       <li>
           <div class="door">
               1</div>
       </li>
       <li>
           <div class="door">
               2</div>
       </li>
       <li>
           <div class="door">
               3</div>
       </li>
       <li>
           <div class="door">
               4</div>
       </li>
       <li>
           <div class="door">
               5</div>
       </li>
       <li>
           <div class="door">
               6</div>
       </li>
       <li>
           <div class="door">
               7</div>
       </li>
       <li>
           <div class="door">
               8</div>
       </li>
       <li>
           <div class="door">
               9</div>
       </li>
       <li>
           <div class="door">
               10</div>
       </li>
       <li>
           <div class="door">
               11</div>
       </li>
       <li>
           <div class="door">
               12</div>
       </li>
       <li>
           <div class="door">
               13</div>
       </li>
       <li>
           <div class="door">
               14</div>
       </li>
       <li>
           <div class="door">
               15</div>
       </li>
       <li>
           <div class="door">
               16</div>
       </li>
       <li>
           <div class="door">
               17</div>
       </li>
       <li>
           <div class="door">
               18</div>
       </li>
       <li>
           <div class="door">
               19</div>
       </li>
       <li>
           <div class="door">
               20</div>
       </li>
       <li>
           <div class="door">
               21</div>
       </li>
       <li>
           <div class="door">
               22</div>
       </li>
       <li>
           <div class="door">
               23</div>
       </li>
       <li>
           <div class="door">
               24</div>
       </li>
       <li>
           <div class="door">
               25</div>
       </li>
   </ul>
   <p id="message">
   </p>

css代碼：

代碼如下:

body {
 background: url("xmas.jpg");
 color: #fff;
 font-family: 'Oleo Script', cursive;
 padding: 20px;
 font-weight: 400;
}
h2 {
 margin:0;
 font-size:75px;
 line-height: 75px;
 text-align: center;
 font-weight: 400;
}
ul {
 margin:0 auto 30px auto;
 padding:0;
 list-style-type:none;
 max-width:900px;
 width: 100%;
 text-align: center;
 user-select: none;
}
li {
 font-weight: 400;
 background-color: #fff;
 box-sizing: border-box;
 border-radius: 6px;
 display: inline-block;
 color:#111;
 cursor:pointer;
 font-size: 26px;
 padding:15px;
 margin:25px 12px;
 width: 130px;
 height:130px;
 line-height: 100px;
 text-align:center;
 position: relative;
 vertical-align:top;
 user-select: none;
 perspective: 800px;
 transition: all 0.4s ease-in-out;
}
ul li:last-child {
 background-size:cover;  
 display:block;
 clear:both;
 margin: 20px auto 0 auto;
 width: 200px;
 height: 275px;
}
ul li:last-child .door {
 font-size: 100px;
 width: 200px;
 height: 275px;
 line-height: 240px;
}
ul li:last-child .revealed {
 line-height: 123px;
}
.door {
 user-select: none;
 color:#fff;
 font-size: 70px;
 position: absolute;
 top:0;
 left:0;
 background-color: #91c1cc;
 box-sizing: border-box;
 border-top: 2px #eee dashed;
 border-right: 2px #eee dashed;
 border-bottom: 2px #eee dashed;
 border-left: 1px #eee solid;
 border-radius: 6px;
 padding:15px;
 width: 130px;
 height:130px;
 transform-origin: 0 40%;
 transition: all 0.4s ease-in-out;
 transform-style: preserve-3d;
}
.current .door {
 background-color: #7EAD44;
}
.current .door.open{
 color: #7EAD44;
}
.revealed {
 user-select: none;
}
#message {
 box-sizing: border-box;
 color: #222;
 display: none;
 font-size: 24px;
 padding: 20px;
 background: #eddecb;
 max-width: 500px;
 width: 100%;
 border-radius: 15px;
 margin: 0 auto;
}
.open {
 box-shadow: 14px 0px 15px -1px rgba(0,0,0,0.2);
 color: #91c1cc;
 transform: rotate3d(0, 1, 0, -98deg);
}
.jiggle {
 animation: jiggle 0.2s infinite;
 transform: rotate(-1deg);
}
@keyframes jiggle {
 0% {
       transform: rotate(-1deg);
 }
 50% {
     transform: rotate(1deg);
 }
}
@media screen and (min-width: 480px) {
 li {
   margin:25px 20px;
 }
}</p> <p>@media screen and (min-width: 768px) {
   body {
       background-size:150px;
   }
   p {
       right: 6%;
       top: 20%;
       bottom: auto;
       margin-left: auto;
       left: auto;
   }
}

js代碼：

代碼如下:

$(document).ready(function () {
         var words = [
     'Lorem ',
     'ipsum ',
     'delor',
     'sit',
     'amet',
     'consect',
     'adipisci',
     'elit,',
     'sed.',
     'Eiusmod',
     'tempor',
     'a',
     'enim',
     'minim',
     'season',
     'nulla',
     'dolore',
     'sint',
     'id',
     'est',
     'laboris',
     'ut.',
     'aute',
     'laborum',
     'toe'
 ];
         var message = '';
         var date = new Date();
         var day = date.getDate();
         var month = date.getMonth() + 1;
         var scrolled = false;
         var timeDelay = 200;
         var cardReveal = function () {
             $('#message').text(message).show();
         };
         if (month === 12) {
             $('li').each(function (index) {
                 var adventwindow = index + 1;
                 var item = $(this);
                 if (day !== adventwindow && adventwindow < day) {
                     window.setTimeout(function () {
                         item.children('.door').addClass('open');
                     }, timeDelay);
                 }
                 timeDelay += 100;
                 if (adventwindow <= day) {
                     var word = words[index];
                     $(this).append('<div class="revealed">' + word + '</div>');
                     message = message + ' ' + word;
                 }
                 if (adventwindow === day) {
                     $(this).addClass('current');
                     $(this).addClass('jiggle');
                 }
                 $(this).on('click', function () {
                     if (adventwindow <= day) {
                         $(this).children('.door').toggleClass('open');
                     }
                     $(this).removeClass('jiggle');
                     if (day >= 25 && adventwindow === 25) {
                         messageReveal();
                         if (!scrolled) {
                             $('html, body').animate({ scrollTop: $('#message').offset().top }, 2000);
                             scrolled = true;
                         }
                     }
                 });
             });
             if (day >= 26) {
                 messageReveal();
             }
         }
     });

感謝各位的閱讀，以上就是“如何實現(xiàn)圣誕節(jié)倒計時頁面特效”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對如何實現(xiàn)圣誕節(jié)倒計時頁面特效這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！