❤2021新年倒计时雪花飘落特效❤ html+css+js实现3D效果(附源码)
❉ 原生js实现2021新年倒计时特效，当然了，可以修改成任意节日日子的倒计时，只需修改截止时间即可。
这篇文章主要为大家详细介绍了JavaScript实现新年倒计时效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
一年又一年，新年又快到了，最近大家又开始抢回家过年的车票了，我们就来算一算离新年还有多少天，
总结总结在即将过去的2020年大家都收获了什么？
本文实例讲述了js实现新年倒计时效果代码。分享给大家供大家参考。
❉运行效果图一：
❉运行效果图二：
❉代码如下:
<html>
<head>
<meta charset="utf-8" />
<script
id="jqbb"
src="https://libs.baidu.com/jquery/1.11.1/jquery.min.js"
>script>
<style type="text/css">
@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-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;
}
}
style>
head>
<body>
<div class="middle">
<h1 class="label">New Year Countdownh1>
<div class="time">
<span>
<div id="LeftTime">div>
span>
div>
div>
body>
html>
...
完整代码在下方↓公众号获取
js
<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 > window.innerHeight) {
this.reset();
}
}
}
class Snow {
createSnowflakes() {
const flakes = window.innerWidth / 4;
this.snowflakes = [];
for (let s = 0; s < flakes; s++) {
this.snowflakes.push(new Snowflake());
}
}
}
new Snow();
/新年倒计时//
function FreshTime() {
var endtime = new Date("2021/2/12,00:00:00"); //结束时间
var nowtime = new Date(); //当前时间
var lefttime = parseInt((endtime.getTime() - nowtime.getTime()) / 1000);
d = parseInt(lefttime / (24 * 60 * 60));
document.getElementById("LeftTime").innerHTML =
d + "天 \t\t" + h + "小时 \t\t" + m + "分 \t\t" + s + "秒";
}
FreshTime();
var sh;
sh = setInterval(FreshTime, 1000);
</script>
完整代码在下方↓公众号获取
❉ ~ 关注我，点赞博文~ 每天带你涨知识!
❉ 1.看到这里了就 [点赞+好评+收藏] 支持下吧，你的「点赞，好评，收藏」是我创作的动力。
❉ 2.关注我~ 每天带你学习 :各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业设计模板 等! 「在这里有好多 前端 开发者，会讨论 前端 Node 知识，互相学习」！
❉ 3.以上内容技术相关问题可以留言/私信交流，也可以关注↓下方公众号 获取更多源码 !
❉ 更多源码
❤女朋友生日❤ HTML+css3+js 实现抖音炫酷樱花3D相册 (含背景音乐)程序员表白必备
❤七夕情人节❤html+css+js 漫天飞雪3D相册(含音乐自定义文字) 程序员表白必备
❤炫酷烟花表白❤ html+css+js 放一场浪漫烟花秀(含音乐) 程序员表白
❤唯美满天星❤ html+css+js炫酷3D相册(含音乐可自定义文字)程序员表白必备
新年祝福❤雪花飘落❤ html+css3+js 实现3D相册开关闭合旋转(情人节生日表白)必备
❤爱情墙❤html5+css3+js 实现全屏七夕表白页面 (可自定义文字相片)
❤[前端永久免费部署上线工具] 解决不需要服务器就能将项目部署上线问题!
❤超炫100套❤+❤vue/react+echarts❤ 大屏可视化数据平台实战项目分享 (附源码)
抖音❤超火| html+css+js 流星雨3D相册(表白必备)制作教程来啦!
前端❤ html+css+js 实现1000个超炫酷特效(附源码)
web前端❤基于html+css+js 仿JD天猫电商平台功能齐全(免费附源码)
抖音超火❤ html+css+js 实现炫酷3D立方图像库(免费附源码)
抖音超火❤ html+css+js 实现炫酷3D魔方(免费附源码)
抖音超火❤流动爱心 html+css+js (免费附源码)
抖音超火❤罗盘时钟html+css+js (免费附源码)
亲测有效❤抖音视频去水印 ( 附源码| 仅供学习参考)
css3 实现3D旋转立方体(免费附源码)
css3 实现3D立体时钟(免费附源码)