原生js实现下雪的新年倒计时动画效果代码
代码语言:html
所属分类:动画
代码描述:原生js实现下雪的新年倒计时动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html> <head> <style> @import url("https://fonts.googleapis.com/css?family=Aleo"); :root { font-family: "Aleo", sans-serif; } html, body { width: 100%; height: 100%; padding: 0; margin: 0; background: rgb(119, 13, 13); background: radial-gradient( circle, rgba(119, 13, 13, 0.92) 64%, rgba(0, 0, 0, 0.6) 100% ); } canvas { width: 100%; height: 100%; } .label { font-size: 2.2rem; background: url("//repo.bfw.wiki/bfwrepo/image/61c518320f647.png"); background-clip: text; -webkit-background-clip: text; color: transparent; animation: moveBg 30s linear infinite; } @keyframes moveBg { 0% { background-position: 0% 30%; } 100% { background-position: 1000% 500%; } } .middle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; user-select: none; } .time { color: #d99c3b; text-transform: uppercase; display: flex; justify-content: center; } .time span { padding: 0 14px; font-size: 0.8rem; } .time span div { font-size: 3rem; } @media (max-width: 740px) { .label { font-size: 1.7rem; } .time span { padding: 0 16px; font-size: 0.6rem; } .time span div { font-size: 2rem; } } </style> </head> <body> <div class="middle"> <h1 class="label">New Year Countdown </h1> <div class="time"> <span> <div id="d">07</div> Days </span> <span> <div id="h">15</div> Hours </span> <span> <div id="m">16</div> Minutes </span> <span> <div id="s">41</div> Seconds </span> </div> </div> <script> class Snowflake { constructor() { this.x = 0; this.y = 0; this.vx = 0; this.vy = 0; this.radius = 0; this.alpha = 0; this.reset(); } reset() { this.x = this.randBetween(0, window.innerWidth); this.y = this.randBetween(0, -window.innerHeight); this.vx = this.randBetween(-3, 3); this.vy = this.randBetween(2, 5); this.radius = this.randBetween(1, 4); this.alpha = this.randBetween(0.1, 0.9); } randBetween(min, max) { return min + Math.random() * (max - min); } update() { this.x += this.vx; this.y += this.vy; if (this.y + this.radius.........完整代码请登录后点击上方下载按钮下载查看
网友评论0