[html]分享一个喜庆节日能用的代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>2021春节</title><style>
html, body{padding:0px;margin:0px;background:#222;font-family: 'Karla', sans-serif;color:#FFF;height:100%;overflow:hidden;
}
h1{z-index: 1000;position:fixed;top:50%;left:50%;transform:translateX(-50%) translateY(-100%);font-size:58px;border:2px solid #FFF;padding:7.5px 15px;background:rgba(0, 0, 0, 0.5);border-radius:3px;overflow:hidden;
}
span{ position:relative;display:inline-block;animation: drop 0.75s;
}
canvas {width:100%;height:100%;
}@keyframes drop {0% { transform: translateY(-100px);opacity: 0;}90% {opacity: 1;transform:translateY(10px);}100% {transform:translateY(0px);}
}
</style>
</head>
<body><canvas></canvas><h1>（文字____________________）<span>（文字）</span><span>（文字）</span>
</h1><script type="text/javascript">
var ctx = document.querySelector('canvas').getContext('2d')
ctx.canvas.width = window.innerWidth
ctx.canvas.height = window.innerHeightvar sparks = []
var fireworks = []
var i = 20; while(i--) {fireworks.push(new Firework(Math.random()*window.innerWidth, window.innerHeight*Math.random()))
}render()
function render() {setTimeout(render, 1000/60)ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height)for(var firework of fireworks) {if(firework.dead) continuefirework.move()firework.draw()}for(var spark of sparks) {if(spark.dead) continuespark.move()spark.draw()}if(Math.random() < 0.05) {fireworks.push(new Firework())}
}function Spark(x, y, color) {this.x = xthis.y = ythis.dir = Math.random() * (Math.PI*2)this.dead = falsethis.color = colorthis.speed = Math.random() * 3 + 3;this.walker = new Walker({ radius: 20, speed: 0.25 })this.gravity = 0.25this.dur = this.speed / 0.1this.move = function() {this.dur--if(this.dur < 0) this.dead = trueif(this.speed < 0) returnif(this.speed > 0) this.speed -= 0.1var walk = this.walker.step()this.x += Math.cos(this.dir + walk) * this.speedthis.y += Math.sin(this.dir + walk) * this.speedthis.y += this.gravitythis.gravity += 0.05}this.draw = function() {drawCircle(this.x, this.y, 3, this.color)}
}function Firework(x, y) {this.xmove = new Walker({radius: 10, speed: 0.5})this.x = x || Math.random() * ctx.canvas.widththis.y = y || ctx.canvas.heightthis.height = Math.random()*ctx.canvas.height/2this.dead = falsethis.color = randomColor()this.move = function() {this.x += this.xmove.step()if(this.y > this.height) this.y -= 1; else this.burst()}this.draw = function() {drawCircle(this.x, this.y, 1, this.color)}this.burst = function() {this.dead = truevar i = 100; while(i--) sparks.push(new Spark(this.x, this.y, this.color))}
}function drawCircle(x, y, radius, color) {color = color || '#FFF'ctx.fillStyle = colorctx.fillRect(x-radius/2, y-radius/2, radius, radius)
}function randomColor(){return ['#6ae5ab','#88e3b2','#36b89b','#7bd7ec','#66cbe1'][Math.floor(Math.random() * 5)];
}function Walker(options){this.step = function(){this.direction = Math.sign(this.target) * this.speedthis.value += this.directionthis.target? this.target -= this.direction: (this.value)? (this.wander) ? this.target = this.newTarget() : this.target = -this.value: this.target = this.newTarget()  return this.direction}this.newTarget = function() {return Math.round(Math.random()*(this.radius*2)-this.radius)}this.start = 0this.value = 0this.radius = options.radiusthis.target = this.newTarget()this.direction = Math.sign(this.target)this.wander = options.wanderthis.speed = options.speed || 1
}
</script><div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"></div>
</body>
</html>

[html]分享一个喜庆节日能用的代码相关推荐

php微信_分享一个完整的微信开发php代码
这篇文章主要为大家分享一个完整的微信开发php代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了微信开发php代码,供大家参考,具体内容如下 //封装成一个微信接口类 cla ...
分享一个有趣的关机或重启代码
//分享一个有趣的关机或重启代码 //"/"后面s关机r重启 #include<windows.h> using namespace std; int main() ...
分享一个我大学时通过写代码，十天赚了两万块钱的经历！
上图是昨天看到的一篇文章,讲述了我对于用技术兼职的一些思考. 恰好之前兼职的项目方也看到了这篇文章,因为我在文章中提到了"爬虫", 他们担心社会大众看到该文的时候,由于对爬虫不了解 ...
分享一个java写的中国象棋代码以及相关视频
注意:相关资料链接地址:http://pan.baidu.com/share/link?shareid=493847&uk=3223420628 若要详细视频请到该链接直接下载: http:/ ...
分享一个强大的数据可视化低代码开发平台
点击关注公众号:互联网架构师,后台回复 2T获取2TB学习资源! 上一篇:Alibaba开源内网高并发编程手册.pdf 整体介绍框架:基于 Vue3 框架编写,使用 hooks 写法抽离部分逻辑,使 ...
分享一个自动刷抖音的代码
adb shell for i in `seq 1 100`; do input swipe 540 1300 540 500 100;sleep 15; done 100代表刷100个,15代表视频 ...
分享一个使用HTML+js制作爱心代码
制作爱心代码: <!doctype html> <html><head><meta charset="utf-8"><titl ...
分享一个标准体重计算器 C#调用代码
身体质量指数 (Body Mass Index, 简称BMI), 通过身高和体重来计算您的身材是否标准 1.计算BMI值获取标准体重参考注意,该示例代码仅适用于 www.apishop.net网站 ...
短网址 php+mysql_一个php短网址的生成代码(仿微博短网址)
分享一个php短网址的生成代码. . 代码如下: urlShort header("Content-Type:text/html;charset=UTF-8"); function ...

[html]分享一个喜庆节日能用的代码

[html]分享一个喜庆节日能用的代码相关推荐

最新文章

热门文章