HTML——2022年超好看的元旦倒计时

2022即将到来，快来一起做一个元旦倒计时分享给自己喜欢的人吧~

PC效果图：

手机效果图：

html：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>新年快乐</title><!-- 这是网页标题 -->
<style>
<audio autoplay="autoplay" loop="loop" preload="auto"     src="http://music.163.com/song/media/outer/url?id=1811921555.mp3">
</audio>
</body>
</html>

部分CSS：

<style>
body{overflow: hidden;margin: 0;
}
h1{position: fixed;top: 30%;left: 0;width: 100%;text-align: center;transform:translateY(-50%);font-family: 'Love Ya Like A Sister', cursive;font-size: 60px;color: #c70012;padding: 0 20px;
}
h1 span{position: fixed;left: 0;width: 100%;text-align: center;
margin-top:30px;font-size:40px;
}
</style>

部分JS：

<script>
var canvas = document.querySelector("canvas"),ctx = canvas.getContext("2d");var ww,wh;function onResize(){ww = canvas.width = window.innerWidth;wh = canvas.height = window.innerHeight;
}ctx.strokeStyle = "red";
ctx.shadowBlur = 25;
ctx.shadowColor = "hsla(0, 100%, 60%,0.5)";var precision = 100;
var hearts = [];
var mouseMoved = false;
function onMove(e){mouseMoved = true;if(e.type === "touchmove"){hearts.push(new Heart(e.touches[0].clientX, e.touches[0].clientY));hearts.push(new Heart(e.touches[0].clientX, e.touches[0].clientY));}else{hearts.push(new Heart(e.clientX, e.clientY));hearts.push(new Heart(e.clientX, e.clientY));}
}var Heart = function(x,y){this.x = x || Math.random()*ww;this.y = y || Math.random()*wh;this.size = Math.random()*2 + 1;this.shadowBlur = Math.random() * 10;this.speedX = (Math.random()+0.2-0.6) * 8;this.speedY = (Math.random()+0.2-0.6) * 8;this.speedSize = Math.random()*0.05 + 0.01;this.opacity = 1;this.vertices = [];for (var i = 0; i < precision; i++) {var step = (i / precision - 0.5) * (Math.PI * 2);var vector = {x : (15 * Math.pow(Math.sin(step), 3)),y : -(13 * Math.cos(step) - 5 * Math.cos(2 * step) - 2 * Math.cos(3 * step) - Math.cos(4 * step)) }this.vertices.push(vector);}
}Heart.prototype.draw = function(){this.size -= this.speedSize;this.x += this.speedX;this.y += this.speedY;ctx.save();ctx.translate(-1000,this.y);ctx.scale(this.size, this.size);ctx.beginPath();for (var i = 0; i < precision; i++) {var vector = this.vertices[i];ctx.lineTo(vector.x, vector.y);}ctx.globalAlpha = this.size;ctx.shadowBlur = Math.round((3 - this.size) * 10);ctx.shadowColor = "hsla(0, 100%, 60%,0.5)";ctx.shadowOffsetX = this.x + 1000;ctx.globalCompositeOperation = "screen"ctx.closePath();ctx.fill()ctx.restore();
};function render(a){requestAnimationFrame(render);hearts.push(new Heart())ctx.clearRect(0,0,ww,wh);for (var i = 0; i < hearts.length; i++) {hearts[i].draw();if(hearts[i].size <= 0){hearts.splice(i,1);i--;}}
}onResize();
window.addEventListener("mousemove", onMove);
window.addEventListener("touchmove", onMove);
window.addEventListener("resize", onResize);
requestAnimationFrame(render);
</script>

需要完整代码微信搜搜 木易学长 微信公众号，回复：元旦代码，即可获取完整源码哟~

HTML——2022年超好看的元旦倒计时相关推荐

Java 2022圣诞树+2023元旦倒计时打包一起领走
2022最后一个月充满了期待,平安夜.圣诞节.元旦节:2023年也是一个早年,因此关于程序方面的浪漫,大家应该趁早准备.下面我将分享一个元旦的倒计时和圣诞树的绘制核心代码.大家可以依据自身的需求,稍微 ...
2023元旦倒计时代码
首次参加csdn的活动"提交一个元旦倒计时代码",纪念一下. 使用了setInterval函数传递第三个参数,IE9以及以下版本不支持. <!doctype html> ...
C++元旦倒计时代码系列合集
目录 1.简单倒计时代码 2.元旦倒计时绘制小科普: 1.简单倒计时代码这是一个简单的程序示例,它可以帮助您计算元旦节到当前时间的倒计时: #include <iostream> #i ...
元旦倒计时是怎么实现？
引言我们日常开发中经常会遇到某个特定日期为终点,进行倒计时计算. 首先,获取终点日期,为基准,然后获取他的time信息. 在去确定时分秒对应的倍数.获取一天的时间信息然后,获取今天的日期,在通过今 ...
【javascript】元旦倒计时代码
元旦倒计时代码引言设计思路源码动画效果引言马上就是2023年元旦了,公司要求在网站上都需要加上新年的倒计时,今天就来做了吧设计思路
javascript 元旦倒计时的代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
元旦倒计时（JS计时器）
通过js编写一个距离2022年元旦还剩多少天的计时器首先我们计算出2022-1-1日距离今天还有多少天代码如下 <script> var nowTimer = +new Date(); ...
【无标题】元旦倒计时代码
使用js 和css来自作的倒计时网页,快元旦啦,小伙伴们快使用起来吧! <!doctype html> <html> <head> <meta charset ...
Pulsar Summit Asia 2022 议题征集令，倒计时十天提交演讲议题
Apache Pulsar 社区年度盛会 Pulsar Summit Asia 2022 将于 11 月 19-20 日线上召开,演讲议题征集已于 8 月 22 日启动,议题征集通道将于 10 月 9 ...

HTML——2022年超好看的元旦倒计时

HTML——2022年超好看的元旦倒计时相关推荐

最新文章

热门文章