前端背景收集之烟花背景

信计2102罗铠威
已于 2024-03-06 17:07:50 修改
阅读量562
点赞数 11
分类专栏： Vue项目常用组件模板仓库文章标签： vue 前端背景
于 2024-01-13 15:31:43 首次发布
本文链接：https://blog.youkuaiyun.com/qq_66443592/article/details/135570934
版权
文章目录

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

 🏅Vue项目常用组件模板仓库
📖前言：

本篇博客主要提供前端背景收集之烟花背景组件源码，需要的朋友请自取
在这里插入图片描述
在这里插入图片描述
🎀源码如下：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>2024新年快乐！万事如意！</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
		<meta name="mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="theme-color" content="#000000">
		<link rel="shortcut icon" type="image/png"
			href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/firework-burst-icon.png">
		<link rel="icon" type="image/png"
			href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/firework-burst-icon.png">
		<link rel="apple-touch-icon-precomposed"
			href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/firework-burst-icon.png">
		<meta name="msapplication-TileColor" content="#000000">
		<meta name="msapplication-TileImage"
			content="https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/firework-burst-icon.png">
		<link href="https://fonts.googleapis.com/css?family=Russo+One" rel="stylesheet">
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
		<link rel="stylesheet" href="./style.css">
		<style>
			* {
     
				position: relative;
				box-sizing: border-box;
			}

			html,
			body {
     
				height: 100%;
			}

			html {
     
				background-color: #000;
			}

			body {
     
				overflow: hidden;
				color: rgba(255, 255, 255, 0.5);
				font-family: "Russo One", arial, sans-serif;
				line-height: 1.25;
				letter-spacing: 0.06em;
			}

			.hide {
     
				opacity: 0;
				visibility: hidden;
			}

			.remove {
     
				display: none;
			}

			.blur {
     
				filter: blur(12px);
			}

			.container {
     
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			#loading-init {
     
				width: 100%;
				align-self: center;
				text-align: center;
				font-size: 2em;
			}

			#stage-container {
     
				overflow: hidden;
				box-sizing: initial;
				border: 1px solid #222;
				margin: -1px;
			}

			#canvas-container {
     
				width: 100%;
				height: 100%;
				transition: filter 0.3s;
			}

			#canvas-container canvas {
     
				position: absolute;
				mix-blend-mode: lighten;
			}

			#controls {
     
				position: absolute;
				top: 0;
				width: 100%;
				padding-bottom: 50px;
				display: flex;
				justify-content: space-between;
				transition: opacity 0.3s, visibility 0.3s;
			}

			@media (min-width: 800px) {
     
				#controls {
     
					visibility: visible;
				}

				#controls.hide:hover {
     
					opacity: 1;
				}
			}

			#menu {
     
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				position: absolute;
				top: 0;
				bottom: 0;
				width: 100%;
				background-color: rgba(0, 0, 0, 0.42);
				transition: opacity 0.3s, visibility 0.3s;
			}

			#menu__header {
     
				padding: 20px 0 44px;
				font-size: 2em;
				text-transform: uppercase;
			}

			#menu form {
     
				width: 240px;
				padding: 0 20px;
				overflow: auto;
			}

			#menu .form-option {
     
				margin: 20px 0;
			}

			#menu .form-option label {
     
				text-transform: uppercase;
			}

			#menu .form-option--select label {
     
				display: block;
				margin-bottom: 6px;
			}

			#menu .form-option--select select {
     
				display: block;
				width: 100%;
				height: 30px;
				font-size: 1rem;
				font-family: "Russo One", arial, sans-serif;
				color: rgba(255, 255, 255, 0.5);
				letter-spacing: 0.06em;
				background-color: transparent;
				border: 1px solid rgba(255, 255, 255, 0.5);
			}

			#menu .form-option--select select option {
     
				background-color: black;
			}

			#menu .form-option--checkbox label {
     
				display: flex;
				align-items: center;
				transition: opacity 0.3s;
				-webkit-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;
			}

			#menu .form-option--checkbox input {
     
				display: block;
				width: 20px;
				height: 20px;
				margin-right: 8px;
				opacity: 0.5;
			}

			@media (max-width: 800px) {
     

				#menu .form-option select,
				#menu .form-option input {
     
					outline: none;
				}
			}

			#close-menu-btn {
     
				position: absolute;
				top: 0;
				right: 0;
			}

			.btn {
     
				opacity: 0.16;
				width: 44px;
				height: 44px;
				display: flex;
				-webkit-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;
				cursor: default;
				transition: opacity 0.3s;
			}

			.btn--bright {
     
				opacity: 0.5;
			}

			@media (min-width: 800px) {
     
				.btn:hover {
     
					opacity: 0.32;
				}

				.btn--bright:hover {
     
					opacity: 0.75;
				}
			}

			.btn svg {
     
				display: block;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<!-- partial:index.partial.html -->
		<!-- SVG Spritesheet -->
		<div style="height: 0; width: 0; position: absolute; visibility: hidden;">
			<svg xmlns="http://www.w3.org/2000/svg">
				<symbol id="icon-play" viewBox="0 0 24 24">
					<path d="M8 5v14l11-7z" />
				</symbol>
				<symbol id="icon-pause" viewBox="0 0 24 24">
					<path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z" />
				</symbol>
				<symbol id="icon-close" viewBox="0 0 24 24">
					<path
						d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
				</symbol>
				<symbol id="icon-settings" viewBox="0 0 24 24">
					<path
						d="M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z" />
				</symbol>
				<symbol id="icon-shutter-fast" viewBox="0 0 24 24">
					<path
						d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z" />
				</symbol>
				<symbol id="icon-shutter-slow" viewBox="0 0 24 24">
					<path
						d="M1 5h2v14H1zm4 0h2v14H5zm17 0H10c-.55 0-1 .45-1 1v12c0 .55.45 1 1 1h12c.55 0 1-.45 1-1V6c0-.55-.45-1-1-1zM11 17l2.5-3.15L15.29 16l2.5-3.22L21 17H11z" />
				</symbol>
			</svg>
		</div>

		<!-- App -->
		<div class="container">
			<div id="loading-init">Loading...</div>
			<div id="stage-container" class="remove">
				<div id="canvas-container">
					<canvas id="trails-canvas"></canvas>
					<canvas id="main-canvas"></canvas>
				</div>
				<div id="controls">
					<div id="pause-btn" class="btn">
						<svg fill="white" width="24" height="24">
							<use href="#icon-pause"></use>
						</svg>
					</div>
					<div id="shutter-btn" class="btn">
						<svg fill="white" width="24" height="24">
							<use href="#icon-shutter-slow"></use>
						</svg>
					</div>
					<div id="settings-btn" class="btn">
						<svg fill="white" width="24" height="24">
							<use href="#icon-settings"></use>
						</svg>
					</div>
				</div>
				<div id="menu" class="hide">
					<div id="close-menu-btn" class="btn btn--bright">
						<svg fill="white" width="24" height="24">
							<use href="#icon-close"></use>
						</svg>
					</div>
					<div id="menu__header">Settings</div>
					<form>
						<div class="form-option form-option--select">
							<label>Shell Type</label>
							<select id="shell-type"></select>
						</div>
						<div class="form-option form-option--select">
							<label>Shell Size</label>
							<select id="shell-size"></select>
						</div>
						<div class="form-option form-option--checkbox">
							<label id="auto-launch-label"><input id="auto-launch" type="checkbox" /><span>Auto
									Fire</span></label>
						</div>
						<div class="form-option form-option--checkbox">
							<label id="finale-mode-label"><input id="finale-mode" type="checkbox" /><span>Finale
									Mode</span></label>
						</div>
						<div class="form-option form-option--checkbox">
							<label id="hide-controls-label"><input id="hide-controls" type="checkbox" /><span>Hide
									Controls</span></label>
						</div>
					</form>
				</div>
			</div>
		</div>
		<!-- partial -->
		<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/fscreen%401.0.1.js'></script>
		<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/Stage%400.1.4.js'></script>
		<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/MyMath.js'></script>
		<script>
			'use strict';
			console.clear();


			const IS_MOBILE = window.innerWidth <= 640;
			const IS_DESKTOP = window.innerWidth > 800;
			const IS_HEADER = IS_DESKTOP && window.innerHeight < 300;
			// 8K - can restrict this if needed
			const MAX_WIDTH = 7680;
			const MAX_HEIGHT = 4320;
			const GRAVITY = 0.9; // Acceleration in px/s
			let simSpeed = 1;

			const