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

信计2102罗铠威

已于 2024-03-06 17:07:17 修改

阅读量417

点赞数 10

分类专栏： Vue项目常用组件模板仓库文章标签：前端前端背景

于 2024-01-16 16:35:45 首次发布

本文链接：https://blog.csdn.net/qq_66443592/article/details/135626543

版权

Vue项目常用组件模板仓库专栏收录该内容

11 篇文章 2 订阅

订阅专栏

文章目录

🐒个人主页：信计2102罗铠威
🏅Vue项目常用组件模板仓库
- 📖前言：
- 🎀源码如下：

🐒个人主页：信计2102罗铠威

 🏅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>

信计2102罗铠威

关注

10
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端背景收集之下雪花狗礼物背景

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

扫一扫