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.02263 0.0482-0.04815 0.1456-0.02495 0.0876-0.06091 0.1943-0.03539 0.0969-0.08933 0.17285-0.11255 0.39907-0.1955 0.46345-0.07308 0.0649-0.22969-0.13227zm1.1922-3.9471q-0.0464-0.0522-0.08062-0.14328-0.03364-0.10095-0.03886-0.18039-0.0047-0.0893 0.02495-0.0876 0.07947-5e-3 0.19722-0.1566 0.11776-0.15139 0.105-0.27087 0.0023-0.0394 0.03364-0.0672 0.0319-0.0377 0.07192-0.0453 0.12297-0.0719 0.22796-6e-3 0.11542 0.0563 0.20474 0.21986 0.07772 0.19257 0.03073 0.31843-0.04641 0.11601-0.23667 0.3225-0.15952 0.1885-0.28887 0.20068-0.11949 0.0128-0.25115-0.10384z"/>
					<path d="m57.457 160.37q-0.13167 0.0517-0.29872 0.0319-0.16704-0.0198-0.4472-0.13518-0.01973-1e-3 -0.08643-0.0447-0.05685-0.0429-0.12238-0.10618-0.05511-0.0725-0.0899-0.15372-0.14442-0.23608-0.08871-0.67807 0.0557-0.44199 0.3388-1.0487 0.07773-0.14384 0.22914-0.36251 0.16126-0.21809 0.31034-0.39732 0.15952-0.18851 0.22043-0.21461 0 0 0.11079-0.033 0.11079-0.0331 0.28365-0.11194 0.05047-0.0169 0.11079-0.033 0.07018-0.0157 0.13979-0.0214 0.06961-6e-3 0.11833 7e-3 0.19663 0.0216 0.39558 0.17172 0.20939 0.14096 0.33699 0.32658 0.12818 0.17576 0.07133 0.30105-0.0012 0.0197-0.06381 0.0754-0.05221 0.0464-0.12472 0.1015-0.06207 0.0458-0.10442 0.0928-0.05279 0.0563-0.14095 0.0412-0.0783-0.0146-0.14327-0.0876-0.05453-0.0824-0.05741-0.20129-0.01508-0.08-0.1392-0.15661-0.11427-0.0759-0.11427-0.0759-0.07888-5e-3 -0.2355 0.13456-0.14618 0.12992-0.29584 0.319-0.18794 0.16704-0.33065 0.40602-0.14212 0.2291-0.23378 0.44139-0.08121 0.20302-0.11603 0.29003-0.04525 0.0963-0.02614 0.27551 0.01913 0.17923 0.05625 0.22099 0.03828 0.0221 0.19663 0.0216 0.16822-1.2e-4 0.39675-0.0162 0.22912-0.0261 0.44896-0.0626 0.21984-0.0366 0.36137-0.0876 0.19432-0.1073 0.33353-0.11889 0.13921-0.0116 0.20708 0.0122 0.10615 0.0458 0.1218 0.11601 0.01566 0.0702-0.05859 0.15487-0.07366 0.0748-0.24653 0.1537-0.16242 0.0696-0.29641 0.16066-0.12355 0.0818-0.12646 0.13108-0.03944-2e-3 -0.09049 0.0243-0.0406 0.0174-0.06961 6e-3 -0.01973-1e-3 -0.15951 0.0203-0.13979 0.0214-0.29002 0.0521-0.14037 0.0313-0.19141 0.058z"/>
					<path d="m59.821 161.24q-0.07714-0.0342-0.16067-0.12819-0.08294-0.10385-0.13456-0.23551-0.05162-0.13167-0.04524-0.24013 0.05569-0.10557 0.15025-0.36716 0.09514-0.27146 0.23437-0.61948 0.08527-0.10382 0.13342-0.24941 0.05801-0.14501 0.10442-0.26101 0.08817-0.15313 0.21116-0.39326 0.12356-0.24999 0.23726-0.50056 0.12414-0.25986 0.21348-0.4327 0.14386-0.2587 0.24538-0.47041 0.11196-0.22099 0.21406-0.44256 0.11196-0.22099 0.2361-0.48085 0.13458-0.26913 0.26975-0.54812 0.14502-0.27842 0.24712-0.49998 0.11254-0.23085 0.13807-0.3283 0.0046-0.0789 0.03655-0.11659 0.04176-0.0371 0.08121-0.0348 0.04176-0.0371 0.0812-0.0348 0.04003-8e-3 0.07947-5e-3 0.03944 2e-3 0.1392 0.15661 0.10962 0.15488 0.10265 0.27321-0.0093 0.15777-0.1926 0.58236-0.17346 0.42516-0.48206 0.9611-0.37822 0.70995-0.61316 1.1711-0.23436 0.45126-0.32718 0.68327-0.09224 0.22216-0.07426 0.2529 0 0 0.14154-0.0511 0.14211-0.0609 0.30685-0.16993 0.11195-0.0528 0.24536-0.13398 0.13341-0.0812 0.25639-0.15312 0.12355-0.0818 0.2036-0.0969 0.12297-0.0719 0.25523-0.1334 0.13283-0.0713 0.1746-0.10846 0.17227-0.069 0.24942-0.0348 0.08701 0.0348 0.16878 0.15836 0.10092 0.13458 0.02609 0.22912-0.07425 0.0847-0.33992 0.22736-0.21462 0.116-0.52089 0.27607-0.29641 0.16066-0.53133 0.28536-0.22506 0.12528-0.25639 0.15311 0 0 0.07017 0.15256 0.07018 0.15256 0.1421 0.27553 0.06959 0.16241 0.15022 0.30569 0.09106 0.13399 0.08816 0.18329 0.09047 0.31207 0.29928 0.46289 0.20881 0.15083 0.45185 0.0563 0.20186-0.0673 0.28886-0.0325 0.09687 0.0353 0.12934 0.15603 0.0348 0.0812 0.01276 0.1195-0.01162 0.029-0.1369 0.14035-0.19838 0.17633-0.3985 0.21402-0.19026 0.0383-0.34338-0.0499-0.1485 1e-3 -0.35382-0.20884-0.20474-0.21984-0.57826-0.76627 0.0023-0.0394-0.03306-0.11079-0.02493-0.0806-0.06031-0.15197-0.0348-0.0812-0.08874-0.17344-0.05336-0.10211-0.05336-0.10211 0.0023-0.0394-0.02435-0.0905-0.02668-0.0511-0.07192-0.12297-0.15487-0.0586-0.23028 0.0459-0.07541 0.1044-0.16126 0.21808-0.05685 0.12529-0.14967 0.3573-0.08237 0.22273-0.14445 0.43676-0.05221 0.21462-0.03714 0.29466-0.0093 0.15778-0.06208 0.21404-0.05221 0.0464-0.20998 0.0371z"/>
					<path d="m69.339 160.46q-0.25348 0.10382-0.44779 0.0429-0.19373-0.0708-0.29987-0.28482-0.09628-0.21347-0.0777-0.529 0.0064-0.10847 0.04874-0.32367 0.05221-0.21461 0.11545-0.44837 0.06382-0.24361 0.13343-0.41762 0.0348-0.087 0.04757-0.13572 0.02263-0.0482-0.01682-0.0505-0.03944-2e-3 -0.10151 0.0435-0.05221 0.0464-0.08353 0.0742-0.22738 0.16472-0.47914 0.40716-0.24189 0.24303-0.45478 0.49765-0.21231 0.24478-0.35327 0.45417-0.1311 0.20996-0.1369 0.30857-0.0087 0.14791-0.1601 0.19837-0.1514 0.0505-0.25579-0.0251-0.18097-0.11949-0.22156-0.27031-0.03015-0.1601 0.02089-0.5232 0.05686-0.46171 0.12765-0.82366 0.07078-0.36193 0.20421-0.77956 0.14387-0.42691 0.3678-1.0371 0.14851-0..........完整代码请登录后点击上方下载按钮下载查看