js实现多彩运动路径动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：js实现多彩运动路径动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
  
  
<style>
/* Best viewed in Chrome with Fullpage mode :) */

@import "https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap";

.particles{
	--glow-layer: 0 0 0 0 rgba(0, 0, 0, 0);

	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	opacity: 0.85;
}

.particle{
	--shadow-opacity: 0.06;
	--depth-opacity: 0.2;

	position: absolute;
	left: 0;
	top: 0;

	opacity: 1;
	box-sizing: border-box;
	box-shadow: 

		var(--glow-layer),
		1.5015vmin 1.5015vmin 1.5015vmin 0 rgba(0, 0, 0, var(--shadow-opacity)),
		inset 1.5015vmin 1.5015vmin 1.5015vmin 0 rgba(255, 255, 255, var(--depth-opacity)),
		inset -1.5015vmin -1.5015vmin 1.5015vmin 0 rgba(0, 0, 0, var(--depth-opacity));

	transform: translate(0, 0) scale(0) rotate(0);
	animation: trail linear 0.7s var(--i, 0s) forwards;
	will-change: transform, opacity;
}

@keyframes trail{
	10%{
		transform: translate(0, 0) scale(1) rotate(0);
	}
	60%{
		opacity: 1;
	}
	100%{
		transform: translate(var(--shiftX, 0), var(--shiftY, 0)) scale(0) rotate(360deg);
		opacity: 0;
	}
}

.controls{
	position: fixed;
	right: 0;
	top: 0;
	display: inline-block;
	box-sizing: border-box;
	padding: 2vmin;
	text-align: right;
	font-family: 'Montserrat', sans-serif;
	font-size: max(0.8em, 2.5vmin);
}

input{
	position: relative;
	left: 0;
	top: 0;
	opacity: 0;
	margin: 0 -7px; /* a typical Windows checkbox is 14x14 in size */
}

input:checked + label{
	color: var(--accent);
}

input:checked + label::before{
	transform: translateY(30%) scaleX(1);
	transform-origin: left top;
}

input:focus-visible + label{
	outline: 2px solid var(--accent);
	outline-offset: 4px;
}

label{
	position: relative;
	margin: 0 0.6em 1em 0;
	font-weight: 600;
	cursor: pointer;
	transition: color ease 400ms;
	color: var(--text-secondary);
	display: inline-block;
}

label::before{
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	transform: translateY(30%) scaleX(0);
	width: 100%;
	height: 0.72em;
	background-color: currentColor;
	z-index: -1;
	transform-origin: right top;
	transition: transform ease 400ms;
	opacity: 0.4;
}

label:hover{
	color: var(--text);
}

.hint{
	position: absolute;
	right: 5vmin;
	bottom: 0;
	transform: translate(0%, 100%);
	width: max(6.4em, 20vmin);
	min-width: 6.4em;
	max-width: 20vmin;
	pointer-events: none;
	opacity: 0.8;
	overflow: visible;
}

.hint-text{
	color: var(--accent);
	fill: currentColor;
}

.special-arrow{
	stroke: currentColor;
}

body[data-hint-shown='yes'] .hint{
	animation: hide ease 0.3s 0.7s forwards;
}

@keyframes hide{
	to{
		opacity: 0;
	}
}

/* to make things look pretty */
html, body{
	position: relative;
	inset: 0;
	width: 100%;
	min-height: 100vh;
	padding: 0;
	margin: 0;
	display: block;
	overflow: hidden;
}

html{
	background-image: radial-gradient(circle at 50%, #fff, #f9f4fa);
	background-size: 100% 100%;
	background-attachment: fixed;
}

body{
	background-color: transparent;
	--accent: #245ef2;
	--accent-alpha: #245ef2bb;
	--text: #000;
	--text-secondary: #00000093;
}

body::before{
	content: "";
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;

	background-image: radial-gradient(circle at 50%, #151515, #000);
	background-size: 100% 100%;
	background-attachment: fixed;

	opacity: 0;
	transition: opacity ease 300ms;
	will-change: opacity;
}

/* I'm not sure but Firefox resolves to a lighter gradient */
@supports (-moz-appearance: none){
	body::before{
		background-image: radial-gradient(circle at 50%, #111, #000);
	}
}

body.glow{
	--accent: #f224da;
	--accent-alpha: #f224dabb;
	--text: #fff;
	--text-secondary: #ffffff93;
}

body.glow::before{
	opacity: 1;
}

body.glow .particles{
	--glow-layer: 0 0 15.015vmin 1.5015vmin currentColor;

	opacity: 1;
	filter: contrast(1.5);
}

::selection{
	color: #fff;
	background-color: var(--accent-alpha);
}

/* Made with Coffee, Care, and Curiosity by @ShadowShahriar */
</style>



</head>

<body>
  <!-- Excited with this project o(^▽^)o -->
<div class="particles"></div>
<div class="shadows"></div>
<div class="controls">
	<input id="toggle-rainbow" type="checkbox" data-changes="rainbow"/>
	<label for="toggle-rainbow">Rainbow</label>

	<input id="toggle-circles" type="checkbox" data-changes="circles"/>
	<label for="toggle-circles">Circles</label>

	<input id="toggle-shadows" type="checkbox" data-changes="shadows" checked/>
	<label for="toggle-shadows">Shadows</label>

	<input id="toggle-depth" type="checkbox" data-changes="depth" checked/>
	<label for="toggle-depth">3D Depth</label>

	<input id="toggle-organicShape" type="checkbox" data-changes="organicShape" checked/>
	<label for="toggle-organicShape">Preserve Distance</label>

	<input id="toggle-insetBorders" type="checkbox" data-changes="insetBorders"/>
	<label for="toggle-insetBorders">Inset Borders</label>

	<input id="toggle-glow" type="checkbox" data-class="glow"/>
	<label for="toggle-glow">Glow</label>

	<!-- hint text -->
	<svg class="hint" version="1.1" viewBox="0 0 35.134 29.888" xmlns="http://www.w3.org/2000/svg">
		<g transform="translate(-49.388 -131.57)" class="hint-text">
			<g stroke-dashoffset="16.95">
				<g stroke-width="5.0535">
					<path d="m50.788 160.12q-0.25801 0.1339-0.50787 0.13045-0.25286-0.0129-0.45392-0.15625-0.19464-0.15578-0.29042-0.457-0.11803-0.27343-0.14064-0.67048-0.02559-0.40646 0.03353-0.83987 0.06854-0.43639 0.19824-0.77823 0.11643-0.28578 0.24484-0.53391t0.25806-0.36191q0.11381-0.0985 0.2238-0.14369 0.11638-0.0578 0.19153-0.0821 0.16258-0.0103 0.36495 0.0394 0.20879 0.0373 0.2447 0.15022 0 0 0.02779 0.0222 0.03424 0.01 0.03424 0.01 0.05631-0.0184 0.13304 0.0924 0.08598 0.1074 0.14628 0.26444 0.05733 0.14762 0.03375 0.26913 0.01922 0.19082-0.03301 0.35255-0.05223 0.16172-0.12754 0.18566-0.03754 0.0123-0.0724 0.0332-0.02833 9e-3 -0.01326 0.0561 0.01497 0.0471-0.0445 0.0557-0.05011 5e-3 -0.12152-0.0236-0.07446-0.0386-0.12663-0.10486-0.01497-0.0471-0.01323-0.17199 0.0017-0.12494-0.01748-0.31576-0.02733-0.28153-0.11719-0.33588-0.09283-0.0638-0.25721 0.0712-0.19343 0.20662-0.33511 0.51079-0.13226 0.30119-0.19139 0.73459-0.06212 0.42399-0.02672 1.0243 0.01236 0.23447 0.07266 0.3915 0.06966 0.15405 0.10094 0.15448 0.14377-4e-3 0.36367-0.095 0.21696-0.10003 0.30254-0.18945 0.12667-0.1232 0.27602-0.30544 0.14636-0.19165 0.25464-0.34009 0.03808-0.0432 0.08301-0.13011 0.04496-0.0868 0.10826-0.14848 0.03939-0.1369 0.08989-0.17368 0.05048-0.0368 0.16356-0.0725 0.0813-5e-3 0.15917 0.0116 0.07786 0.0167 0.10866 0.0484 0.04022 0.0287-0.0073 0.0748-0.03754 0.0123-0.03811 0.0431 0.0059 0.0188 0.0059 0.0188 0.03081 0.0317-0.03383 0.18696-0.05822 0.1429-0.16393 0.33199-0.10572 0.18909-0.21399 0.33754-0.10185 0.13606-0.15833 0.154-0.09421 0.0298-0.07616 0.0865 6e-3 0.0189-0.11127 0.13904-0.10786 0.11715-0.26275 0.24938-0.14551 0.12915-0.2683 0.19934z"/>
					<path d="m52.972 159.97q-0.10086-0.0557-0.15237-0.11308-0.05151-0.0575-0.05544-0.16602-0.0054-0.14807 0.02838-0.30744 0.03339-0.16925 0.06714-0.32862 0.0133-0.1784 0.03646-0.35715 0.03268-0.18899 0.12566-0.35052 0.09497-0.37905 0.20016-0.74858 0.10484-0.3794 0.17935-0.7775 0.11507-0.36988 0.20375-0.64986 0.09819-0.29021 0.24037-0.73028 0.07988-0.25 0.12908-0.52855 0.0587-0.28877 0.18866-0.52082 0.056-0.091 0.08347-0.1513 0.03697-0.0705 0.07431-0.13119 0.0085-0.0399 0.05744-0.0515 0.05891-0.0116 0.12869 5e-3 0.06981 0.0172 0.11109 0.0651 0.02927-0.0108 0.07125 0.0568 0.05151 0.0575 0.09386 0.13497 0.04235 0.0775 0.03462 0.13713 0.0015 0.0394-0.0158 0.10929-0.0074 0.0695-0.0447 0.13012-0.03805 0.0409-0.07467 0.12133-0.02711 0.0701-0.09155 0.201-0.03483 0.12976-0.05941 0.26904-0.02496 0.12939-0.07037 0.23977-0.03519 0.11989-0.09047 0.23062-0.04542 0.11037-0.06264 0.18019-0.06085 0.22956-0.15169 0.45031-0.08096 0.22038-0.1411 0.46967-0.06049 0.23942-0.12028 0.49858-0.06013 0.24929-0.18023 0.48099-0.06516 0.11109-0.08868 0.27998t-0.04704 0.33776q-0.05278 0.17984-0.0964 0.33958-0.03411 0.1495-0.03267 0.18899-0.05135 0.21931-0.07308 0.43756-0.01222 0.20801-0.08546 0.36882-0.0063 0.0991-0.03375 0.15936-0.02745 0.0604-0.09621 0.0727-0.06909 3e-3 -0.1897-0.0524z"/>
					<path d="m54.305 160.12q-0.07424-0.0835-0.10672-0.20417-0.02261-0.12007-0.0058-0.23782 0.01685-0.11775 0.06091-0.19431 0.0046-0.0789 0.02669-0.11717 0.03248-0.0476 0.02494-0.0876-0.0076-0.04 0.02785-0.13688 0.03539-0.0969 0.0702-0.18387 0.07831-0.15371 0.16997-0.366 0.09224-0.22216 0.17404-0.43503 0.08179-0.21287 0.14039-0.36773 0.05859-0.15488 0.07078-0.19374 7e-3 -0.11832 0.16532-0.1189 0.12065-0.0325 0.17749 0.0104 0.05743 0.033 0.14674 0.19665 0.07424 0.0835 0.04523 0.24014-0.029 0.15661-0.15141 0.38688-0.04408 0.0765-0.11196 0.22098-0.05801 0.14501-0.08469 0.26218-0.04408 0.0765-0.11196 0.22099-0.05743 0.13515-0.10442 0.26101-0..........完整代码请登录后点击上方下载按钮下载查看