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