jquery实现2021新年倒计时时钟下雪动画效果代码
代码语言:html
所属分类:动画
代码描述:jquery实现2021新年倒计时时钟下雪动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html> <head> <meta charset="utf-8"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> <style type="text/css"> @import url('https://fonts.googleapis.com/css?family=Limelight|Mada'); *, *:before, *:after { -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; } body { background: #73cdc0; } canvas#snow { width: 100vw; height: 100vh; position: absolute; pointer-events:none; } .container { width: 600px; text-align: center; position: absolute; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); top: 50%; left: 50%; font-family: 'Mada', sans-serif; } .intro { margin: 5% auto; color: #e16f97; letter-spacing: 1px; word-spacing: 12px; } .intro span { font-size: 40px; font-family: 'Limelight', cursive; } .countdown-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; margin: 5% auto; color: #fff; } label, output, .time-el span { display: block; } .time-el { position: relative; } .time-el:not(:last-child):after { content: ":"; position: absolute; right: -30px; top: 28%; font-size: 30px; color: #e16f97; } .time-el .digit{ position: relative; width: 100px; height: 90px; display: inline-block; font-size: 50px; line-height: 90px; font-family: 'Limelight', cursive; } .inner { height: 200%; width: 100%; position: absolute; } .time-el .top, .time-el .bottom { position: absolute; height: 50%; width: 100%; overflow: hidden; left: 0; right: 0; margin: auto; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .time-el .bottom { -webkit-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; transform-origin: 50% 0%; } .time-el label{ font-size: 10px; letter-spacing: 1px; color: #e16f97; } .current .top { z-index: 3; -webkit-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transform: perspective(150px); transform: perspective(150px); border-top-left-radius: 6px; border-top-right-radius: 6px; background: #036161; color: #dcdcd6; } .next .top { z-index: 4; -webkit-transform-origin: 50% 0; -ms-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transform: perspective(150px) rotateX(180deg); transform: perspective(150px) rotateX(180deg); bottom: 0; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; background: teal; } .next .top .inner { position: absolute; top: -100%; left: 0; right: 0; margin: auto; } .current .bottom { z-index: 1; // top: 0; border-top-left-radius: 6px; border-top-right-radius: 6px; background: #036161; color: #dcdcd6; } .next .bottom { z-index: 2; bottom: 0; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; background: teal; } .next .bottom .inner { position: absolute; top: -100%; left: 0; right: 0; margin: auto; } </style> </head> <body> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script> <div class="container"> <h1 class="intro"><span>2021</span> IS COMING IN</h1> <div class="countdown-wrapper"> <div class="days time-el"> <output id="days"> <div class="digit"> <div class="next"> <span class="top"><span class="inner"></span></span> <span class="bottom"><span class="inner"></span></span> </div> <div class="current"> <span class="top"><span class="inner"></span></span> <span class="bottom"><span class="inner"></span></span> </div> </div> </output> <label for="days">DAY(S)</label> </div> <div class="hours time-el"> <output id="hours"> <div class="digit"> <div class="next"> <span class="top"><span class="inner"></span></span> <span class="bottom"><span class="inner"></span></span> </div> <div class="current"> <span class="top"><span class="inner"></span></span> <span class="bottom"><span class="inner"></span></span> </div> </div> </output> <label for="hours">HOUR(S)</label> </div> <div class="minutes time-el"> <output id="minutes"> <div class="digit"> <div class="next"> <span class="top"><span class="inner"></span></span> <span class="bottom"><span class="inner"></span></span> </div> <div class="current"> <span class="top"><span class="inner"></span></span> <span class="bottom"><span class="inner"></span></span> </div> </div> </output> <label for="minutes">MINUTE(S)</label> </div> <div class="seconds time-el"> <output id="seconds"> <div class="digit"> <div class="next"> <span class="top"><span class="inner"></span></span> <span class="bottom"><span class="inner"></span></span> </div> <div class="current"> <span class=&quo.........完整代码请登录后点击上方下载按钮下载查看
网友评论0