前端背景收集之下雪花狗礼物背景

发布时间：2024年01月16日

文章目录

🐒个人主页

🏅Vue项目常用组件模板仓库

📖前言：

本篇博客主要提供前端背景收集之下雪花狗礼物背景组件源码，，（下雪花的表情?，可以替换为🐕 🪂 🎀 🎇 等一系列表情，下面是表情官网，也可以是文字内容）可以修改背景颜色，插入背景图片均可，看自己想象力发挥，需要的朋友请自取
🐒表情Emoji官网入口

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

🎀源码如下：

<!DOCTYPE html>

<html>

	<head>

		<style>
			body {

				background-color: #000000;/* 背景 */

			}

			.snowflake {

				position: absolute;

				font-size: 25px;/* 文字大小 */

				color: #FFFFFF;/* 物体颜色 */

				text-shadow: 1px 1px 1px #000000; /* 物体阴影，立体感*/

				user-select: none;

			}
		</style>

	</head>

	<body>

		<script>
			function random(min, max) {

				return Math.floor(Math.random() * (max - min + 1)) + min;

			}

			function Snowflake() {

				this.characters = "欢迎"; /* ?? 🐕 🪂 🎀 🎇 欢迎 */

				this.x = random(0, window.innerWidth);

				this.y = random(-200, -100);

				this.speed = random(1, 5);

				this.element = document.createElement("span");

				this.element.classList.add("snowflake");

				this.element.innerHTML = this.characters;

				document.body.appendChild(this.element);

			}

			Snowflake.prototype.update = function() {

				this.y += this.speed;

				this.element.style.top = this.y + "px";

				this.element.style.left = this.x + "px";

				if (this.y > window.innerHeight) {

					this.y = random(-200, -100);

					this.x = random(0, window.innerWidth);

				}

			};

			var snowflakes = [];

			for (var i = 0; i < 100; i++) {//物体下落数量

				snowflakes.push(new Snowflake());

			}

			setInterval(function() {

				snowflakes.forEach(function(snowflake) {

					snowflake.update();

				});

			}, 50);//修改下落频率
		</script>

	</body>

</html>
文章来源:https://blog.csdn.net/qq_66443592/article/details/135626543
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章