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

文章目录

  • 个人主页
  • Vue项目常用组件模板仓库
    • 前言:
    • 源码如下:

个人主页

Vue项目常用组件模板仓库

前言:

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

前端背景收集之下雪花狗礼物背景_第1张图片
前端背景收集之下雪花狗礼物背景_第2张图片
前端背景收集之下雪花狗礼物背景_第3张图片

源码如下:

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>

你可能感兴趣的:(Vue项目常用组件模板仓库,前端,前端背景)