js实现开关控制背景小球运动动画效果代码-html代码-BFW代码库

js实现开关控制背景小球运动动画效果代码

代码语言：html

所属分类：动画

代码描述：用js实现一个开关来控制背景中彩色小球运动动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


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

<head>

  <meta charset="UTF-8">
  

   <link rel="preconnect" href="https://fonts.googleapis.com">

<link href="https://fonts.googleapis.com/css2?family=Spectral:wght@200;400&display=swap" rel="stylesheet">
  
  
  
<style>
* {
	box-sizing: border-box;
}

:root {
	--buttonColor: #ff1fb0;
}

body {
	font-family: 'Spectral', serif;
	font-size: clamp(100%, 1rem + 2vw, 2rem);
	margin: 0;
	background: #2c67d4;
	color: #ffffff;
	min-height: 100vh;
	max-width: 100%;
	overflow-x: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
}

main {
	width: 100%;
	max-width: 86rem;
	padding: 2rem;
	position: relative;
	z-index: 1;
}

h1 {
	font-weight: 200;
	font-size: clamp(4rem, 10vw, 12rem);
	line-height: 1.2;
	letter-spacing: -0.07em;
	margin: 0;
}

p {
	margin: 0 0 2rem;
}

button {
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	padding: 1rem 1.5rem;
	border-radius: 0.4rem;
	font-size: 1.15rem;
	font-family: Helvetica, sans-serif;
	font-weight: 600;
	background-color: var(--buttonColor);
	color: inherit;
	box-shadow: 0 0.1rem 0.85rem rgba(0, 0, 0, 0.25);
	cursor: pointer;
	min-width: 16rem;
	transition: color 200ms, background-color 200ms;
}

button:is(:hover, :focus) {
	--buttonColor: #bf0d81;
}

.button__toggle {
	display: block;
	position: relative;
	flex: 0 0 2.4rem;
	height: 1.5rem;
	border: 2px solid;
	border-radius: 1.5rem;
	margin-left: 0.5rem;
	padding: 4px;
	transform: background-color 100ms 200ms;
}

.button__toggle::after {
	position: absolute;
	width: calc(1.5rem - 10px);
	height: calc(1.5rem - 10px);
	top: 3px;
	left: 3px;
	background-color: #ffffff;
	content: '';
	border-radius: 50%;
	transition: transform 300ms, background-color 300ms;
	transform-origin: center center;
}

.button__text {
	flex: 0 0 auto;
}

.circle {
	--c1: #f2c4e2;
	--c2: #d97eb9;
	--size: max(8rem, 13vw);
	--delay: 0s;
	position: absolute;
	top: 0;
	left: 0;
	width: var(--size);
	height: var(--size);
	border-radius: 50%;
	background: radial-gradient(circle at 20% 70%, var(--c1), var(--c2));
	pointer-events: none;
	animation: var(--animation, drift) 12s var(--delay) linear infinite alternate;
	animation-play-state: var(--playState, paused);
}

@media (prefers-reduced-motion: no-preference) {
	body {
		--playState: running;
	}
}

.allow-motion .button__toggle {
	background-color: #ffffff;
}

.allow-motion .button__toggle::after {
	transform: translate3d(100%, 0, 0) scale(1.2);
	background-color: var(--buttonColor);
}

/* Circle animations */
.circle:nth-child(2) {
	--c1: #194aa6;
	--c2: #194aa6;
	--size: max(3rem, 10vw);
	--delay: 1s;
	top: 50%;
	left: 25%;
}

.circle:nth-child(3) {
	--c1: #194aa6;
	--c2: #194aa6;
	--size: max(3rem, 10vw);
	--delay: 3s;
	top: 30%;
	left: 50%;
}

.circle:nth-child(4) {
	--c1: #a0e3f2;
	--c2: #2fa7c2;
	--animation: drift2;
	--delay: 5s;
	top: 70%;
	left: 20%;
}

.circle:nth-child(5) {
	--animation: d.........完整代码请登录后点击上方下载按钮下载查看