首页 > 代码库 > 2014年圣诞节倒计时网页
2014年圣诞节倒计时网页
2014年的圣诞节即将来临之季。爱编程小编给大家分享一款2014年圣诞节倒计时网页,当天的日期卡片有抖动的效果。一起看下效果图:
在线预览 源码下载
实现的代码。
html代码:
<h1> Merry Christmas</h1> <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;}h1 { 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; }}@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(); } } });
注:本文爱编程原创文章,转载请注明原文地址:http://www.w2bc.com/Article/11857
2014年圣诞节倒计时网页
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。