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;
	posi.........完整代码请登录后点击上方下载按钮下载查看