下雪的2021新年倒计时主题特效

最新推荐文章于 2023-02-06 06:54:07 发布
最新推荐文章于 2023-02-06 06:54:07 发布
阅读量385 收藏
点赞数 2
分类专栏： 网页特效
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45959525/article/details/110945588
版权

基于canvas制作全屏飘雪背景，2021年翻页倒计时间动画特效。适用于各种活动主题倒计时特效。两种特效结合可以自由拆分使用。
在这里插入图片描述

*,
*: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;
}

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>新年倒计时</title>

<link type="text/css" href="css/style.css" rel="stylesheet" />

<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript" src="js/TweenMax.min.js"></script>

</head>
<body>
<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">天(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">时(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">分(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="top"><span class="inner"></span></span>
        <span class="bottom"><span class="inner"></span></span>
          </div>
      </div>
      </output>
      <label for="seconds">秒(S)</label>
    </div>
  </div>
</div>

<canvas id="snow"></canvas>

</body>
</html>

let targetTime = new Date("Jan 1, 2021");

let oneSecond = 1000;
let oneMinute = oneSecond * 60;
let oneHour = oneMinute * 60;
let oneDay = oneHour * 24;

let $daysEl = $(".time-el #days");
let $hoursEl = $(".time-el #hours");
let $minutesEl = $(".time-el #minutes");
let $secondsEl = $(".time-el #seconds");

function startCountDown() {
  updateTick();
  let timeInterval = setInterval(updateTick, oneSecond);
  function updateTick() {
    let timeLeft = Date.parse(targetTime) - Date.parse(new Date());
    // only allow flip if the value has changed
    if (+$daysEl.find('.next .top .inner').html() !== +Math.floor(timeLeft / oneDay)) flipMe($daysEl);
    if (+$hoursEl.find('.next .top .inner').html() !== +Math.floor(timeLeft % oneDay / oneHour)) flipMe($hoursEl);
    if (+$minutesEl.find('.next .top .inner').html() !== +Math.floor(timeLeft % oneHour / oneMinute)) flipMe($minutesEl);
    if (+$secondsEl.find('.next .top .inner').html() !== +Math.floor(timeLeft % oneMinute / oneSecond)) flipMe($secondsEl);
    // update values
    $daysEl.find('.next .top .inner, .current .bottom .inner').html(Math.floor(timeLeft / oneDay));
    $hoursEl.find('.next .top .inner, .current .bottom .inner').html(("0" + Math.floor(timeLeft % oneDay / oneHour)).slice(-2));
    $minutesEl.find('.next .top .inner, .current .bottom .inner').html(("0" + Math.floor(timeLeft % oneHour / oneMinute)).slice(-2));
    $secondsEl.find('.next .top .inner, .current .bottom .inner').html(("0" + Math.floor(timeLeft % oneMinute / oneSecond)).slice(-2));


    function flipMe(el) {
      let tl = new TimelineMax().
      to(el.find('.current .top'), 0.9, { rotationX: -180, ease: Power1.easeInOut, onComplete: function () {
          $daysEl.find('.current .top .inner, .next .bottom .inner').html(Math.floor(timeLeft / oneDay));
          $hoursEl.find('.current .top .inner, .next .bottom .inner').html(("0" + Math.floor(timeLeft % oneDay / oneHour)).slice(-2));
          $minutesEl.find('.current .top .inner, .next .bottom .inner').html(("0" + Math.floor(timeLeft % oneHour / oneMinute)).slice(-2));
          $secondsEl.find('.current .top .inner, .next .bottom .inner').html(("0" + Math.floor(timeLeft % oneMinute / oneSecond)).slice(-2));
          TweenMax.set(el.find('.current .top'), { rotationX: 0 });
        } }, 0).
      to(el.find('.next .top'), 0.9, { rotationX: 0, ease: Power1.easeInOut, clearProps: 'all' }, 0);
    }

    if (timeLeft <= 0) clearInterval(timeInterval);
  }
}


const LetItSnow = function () {
  let canvas;
  let ctx;
  let durationLimit_ms;

  const snowflakes = [];
  const count = 150;
  let paused = false;
  let complete = false;

  function update(time) {
    snowflakes.forEach(function (el) {
      el.update(time);
    });
  }

  function resize() {
    ctx.canvas.width = canvas.offsetWidth;
    ctx.canvas.height = canvas.offsetHeight;
    update();
  }

  function draw() {
    ctx.clearRect(0, 0, canvas.offsetWidth, canvas.offsetHeight);
    snowflakes.forEach(function (el) {
      el.draw();
    });
  }

  function loop(time) {
    // if (time >= durationLimit_ms) LetItSnow.paused = true;
    draw();
    update(time);
    if (!LetItSnow.complete) window.requestAnimationFrame(loop);
  }

  function addSnowflakes() {
    for (var i = 0; i < count; i++) {
      snowflakes.push(SnowFlake(canvas));
    };
  }

  function events() {
    window.addEventListener('resize', resize);
  }

  function init(canvasEl, durationInSec) {
    // canvas = document.querySelector(`${canvasEl}`);
    canvas = document.querySelector(canvasEl);
    ctx = canvas.getContext('2d');
    durationLimit_ms = durationInSec * 1000;
    addSnowflakes();
    events();
    loop();
    resize();
  }

  return {
    init: init,
    paused: paused,
    complete: complete };


}();

function SnowFlake(canvEl) {
  const canvas = canvEl;
  const ctx = canvas.getContext('2d');

  function random(min, max) {
    return min + Math.random() * (max - min);
  }

  var x = random(0, canvas.offsetWidth);
  var y = random(-canvas.offsetHeight, 0);
  var ff = random(0.5, 1);
  var fill = 'rgba(255, 255, 255, ' + ff + ')';
  const radius = random(0.25, 7.0);

  var i = 0;
  var easeDuration_ms = 5 * 60;


  var gravity = 2;
  var angle = random(-1, 1);
  var density = random(0, 1000);
  var speed = 0;
  var wind = 0;

  function draw() {
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, 2 * Math.PI);
    ctx.fillStyle = fill;
    ctx.fill();
    ctx.closePath();
  }

  function animateSnowFall(time) {
    const hitGround = y > canvas.offsetHeight;
    angle += 0.02;

    if (hitGround) {
      y = 0;
      x = random(0, canvas.offsetWidth);
    } else {
      y += speed;
      x += wind;

      if (LetItSnow.paused) {
        slowDownAndPause(speed, wind);
      } else {
        // creating a curved movement and speed for diffrent snowflakes
        speed = 0.15 * (Math.cos(angle + density) + 1 + radius * 3);
        wind = 0.5 * (Math.sin(angle) * 2);
      }

    }
  }
  function slowDownAndPause() {
    if (i < easeDuration_ms) {
      // simulating easeOutSine
      speed = speed - speed * Math.sin(i / easeDuration_ms * (Math.PI / 2));
      wind = wind - wind * Math.sin(i / easeDuration_ms * (Math.PI / 2));
      i++;
    } else {
      LetItSnow.complete = true;
    }
  }

  function update(time) {
    animateSnowFall(time);
  }

  return {
    update: update,
    draw: draw,
    slowDownAndPause: slowDownAndPause };

}


$(function () {
  startCountDown();
  LetItSnow.init('#snow');
});
W Y L
关注
专栏目录
JS计算两个日期之间时间差
u013771380的博客
10-14 189
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body&gt...
CSS3 倒计时
03-21
纯 CSS3 实现 圆形时间进度条-倒计时 有需要的可以下载看看
倒计时
weixin_34413103的博客
12-15 70
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;倒计时&lt;/title&gt; &lt;style&gt; #box{ margin-top
2023跨年代码（烟花+自定义文字+背景音乐+雪花+倒计时）
热门推荐
好好读书
12-25 6万+
2023跨年代码（烟花+自定义文字+背景音乐+雪花+倒计时） 简单 的 线上倒计时跨年烟花盛宴
2019新年倒计时雪花特效代码
03-20
2019新年倒计时雪花代码是一款html5基于canvas绘制下雪动画场景结合新年倒计时代码。
新年了做一个新年倒计时前加上一个浪漫的雪花飞舞效果
superw的博客
01-26 354
先上效果图片，再上代码 效果 JS关键代码 //下雪效果 function snow(){ const canvas = document.getElementById("background"); const ctx = canvas.getContext("2d"); const width = window.innerWidth; const height = window.innerHeight; canvas.width = width;
分享75个JS特效倒计时，总有一款适合您
zy0412326的专栏
02-06 939
js
Android下雪动画 VS JS下雪动画
juer2017的博客
09-27 786
Android下雪动画的实现 自定义View package com.shanjing.snowflake; import android.content.Context; import android.graphics.Canvas; import android.util.AttributeSet; import android.view.View; import android....
分享996个实用的JavaScript特效你要的全在这里
weixin_47730343的博客
05-31 2818
链接:https://pan.baidu.com/s/1eL8ASFY7BGiIrVXCtgPzgQ 密码:rbqo 我就不信没有你想要的。996个好看且实用的JavaScript特效，总有一款适合你，小弟在某付费网站上收集的，虽然不是我的原创但是小弟这996个Js也是花了很多时日！下面是JS的名字，我放了一些图片，所有图片全都放进去是不行的996个图太多，大家下载后可以看到。 css3聚光灯射线旋转动画特效 js圆形虚线指针时钟特效 HTML5 Canvas透明气泡动画特效 jedate选择一年范围.
下雪主题新年倒计时特效
06-01
本项目名为“下雪主题新年倒计时特效”，它结合了JavaScript（JS）编程语言的动态效果与时间日期处理，为用户创建了一个富有节日气氛的全屏下雪背景动画，并配以2021新年快乐的倒计时功能。下面将详细介绍这个项目中...
H5带下雪效果的新年倒计时特效
06-24
本项目"带下雪效果的新年倒计时特效"是HTML5 Canvas技术的一个应用场景，通过Canvas来实现一个具有视觉吸引力的新年庆祝元素：全屏下雪背景动画和倒计时功能。 首先，让我们深入了解一下HTML5 Canvas。Canvas是一个...
H5带下雪效果的新年倒计时特效.zip
10-09
【标题】"H5带下雪效果的新年倒计时特效.zip"是一个包含网页互动特效的资源包，主要应用于创建富有节日气氛的H5页面。这个特效结合了下雪的视觉效果与新年倒计时功能，能够为网站或应用程序增添喜庆的元素，提升用户...
新年倒计时.zip
06-03
总结来说，新年倒计时.zip包含了一个具备倒计时功能和下雪特效的网页模板。通过JavaScript和CSS，开发者创建了一种互动且视觉吸引人的新年庆祝方式，让用户可以直观地看到距离新年的剩余时间，并沉浸在冬季的氛围中...
125款浪漫七夕表白网站源码【建议收藏】HTML+CSS+JavaScript
HTML网页设计
10-03 1万+
📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
新年背景html代码,html5 canvas新年下雪背景动画特效
weixin_35705011的博客
06-07 871
特效描述：html5 canvas新年下雪 背景动画特效。three.js基于canvas绘制新年雪花效果，下雪动画，网页飘雪背景动画特效、代码结构1. 引入JS2. HTML代码document.writeln("$(function() {if (/MSIE 6|MSIE 7|MSIE 8/.test(navigator.userAgent)) {return}var container = ...
医院后台管理系统-医院后台管理系统-医院后台管理系统-医院后台管理系统-医院后台管理系统-医院后台管理系统-医院后台管理系统-医
最新发布
09-26
医院后台管理系统-医院后台管理系统-医院后台管理系统-医院后台管理系统-医院后台管理系统-医院后台管理系统-医院后台管理系统-医院后台管理系统-医院后台管理系统-医院后台管理系统-医院后台管理系统-医院后台管理系统 1、资源说明：医院后台管理系统源码，本资源内项目代码都经过测试运行成功，功能ok的情况下才上传的。 2、适用人群：计算机相关专业(如计算计、信息安全、大数据、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工等学习者，作为参考资料，进行参考学习使用。 3、资源用途：本资源具有较高的学习借鉴价值，可以作为“参考资料”，注意不是“定制需求”，代码只能作为学习参考，不能完全复制照搬。需要有一定的基础，能够看懂代码，能够自行调试代码，能够自行添加功能修改代码。 4. 最新计算机软件毕业设计选题大全(文章底部有博主联系方式): https://blog.csdn.net/2301_79206800/article/details/135931154 技术栈、环境、工具、软件： ① 系统环境:Windows ② 开发语言：Java ③ 框架：SpringBo
网络综合布线施工方案书.doc
09-26
网络综合布线施工方案书
canvas 2021新年倒计时下雪背Uncaught TypeError: Cannot read properties of null (reading 'querySelectorAll')景
06-05
2021新年倒计时下雪背景是一个非常常见的动画效果，通过在画布上绘制雪花并让它们随机移动和旋转来实现。 关于Uncaught TypeError: Cannot read properties of null (reading 'querySelectorAll')错误，这个错误...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值