js+css实现可调配置参数的彩色曲线圈圈动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：js+css实现可调配置参数的彩色曲线圈圈动画效果代码

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

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

<head>
  <meta charset="UTF-8">
  

  
  
<style>
@layer reset, base, demo;

@layer demo {
        .controls-panel {
                position: absolute;
                top: 1rem;
                right: 1rem;

                background: rgba(78 170 246 / 0.5);
                backdrop-filter: blur(4px);
                border: 1px solid rgba(255 255 255 / 0.35);
                border-radius: 5px;
                width: var(--control-panel-width, 2rem);
                display: grid;
                grid-template-rows: var(--control-panel-rows, 2rem 0fr);
                transition: grid-template-rows 300ms ease-in-out var(--delay-reveal, 0ms),
                        width 300ms ease-in-out var(--delay-width, 400ms);
        }
        .controls-panel > label {
                cursor: pointer;
                margin: 0;
                transition: rotate 300ms ease-in-out;
                display: grid;
                place-content: center end;
                color: white;
        }
        .controls-panel > label:hover > svg {
                rotate: 90deg;
        }
        .controls-panel > label > svg {
                --toggle-icon-scale: var(--toggle-config-scale, 1);
                grid-area: 1 / 1;
                margin-right: 0.25rem;
                width: 100%;
                transition: 300ms ease-in-out;
                scale: var(--toggle-icon-scale, 1);
        }
        .controls-panel > label > svg:last-of-type {
                --toggle-icon-scale: var(--toggle-close-scale, 0);
        }
        .controls-panel input[type="checkbox"] {
                position: absolute;
                width: 1px;
                height: 1px;
                padding: 0;
                margin: -1px;
                overflow: hidden;
                clip: rect(0, 0, 0, 0);
                white-space: nowrap;
                border-width: 0;
        }
        .controls-panel:has(input[type="checkbox"]:checked) {
                --control-panel-rows: 2rem 1fr;
                --control-panel-width: 280px;
                --delay-reveal: 400ms;
                --delay-width: 0ms;
                --toggle-close-scale: 1;
                --toggle-config-scale: 0;
        }

        .controls {
                overflow: hidden;
                display: grid;
                gap: 0.5rem;
        }
        .controls > div {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 0.5rem;
                padding-inline: 1rem;
        }
        .controls > div:last-child {
                margin-bottom: 1rem;
        }
        .controls > div > label {
                font-size: 0.75rem;
                text-align: right;
        }
        input[type="range"] {
                width: 100%;
        }
        /* color picker range slider */
        input[type="range"].color-picker {
                -webkit-appearance: none;
                width: 100%;
                height: 6px;
                border-radius: 5px;
                background: linear-gradient(
                        to right,
                        hsl(0, 100%, 50%),
                        hsl(60, 100%, 50%),
                        hsl(120, 100%, 50%),
                        hsl(180, 100%, 50%),
                        hsl(240, 100%, 50%),
                        hsl(300, 100%, 50%),
                        hsl(360, 100%, 50%)
                );
                outline: none;
                transition: background 0.2s;
        }

        input[type="range"].color-picker {
                --clr-thumb: black;
        }
        input[type="range"].color-picker::-webkit-slider-thumb {
                -webkit-appearance: none;
                width: 16px;
                height: 16px;
                border-radius: 50%;
                background: var(--clr-thumb);
                border: 2px solid white;
                cursor: pointer;
                transition: background 0.2s;
        }

        input[type="range"].color-picker::-moz-range-thumb {
                width: 16px;
                height: 16px;
                border-radius: 50%;
                background: var(--clr-thumb);
                border: 2px solid white;
                cursor: pointer;
                transition: background 0.2s;
        }

        .wrapper {
                --inner-duration: 16s;
                --inner-delay-factor: calc(var(--inner-duration) / 100);
                --inner-size: 200px;
                --inner-offset: -100px;
                --inner-radius: 50%;
                --outer-duration: calc(var(--inner-duration) * 1.5);
                --outer-delay-factor: calc(var(--inner-duration) / 5);
                --clr-even: var(--clr-1, hotpink);
                --clr-odd: var(--clr-2, steelblue);

                /* elements to add to controls:
                - timing function
                - scale
                */
                --outer-timing-function: linear;
                --inner-timing-function: ease-in-out;
                --inner-scale: 1.2;

                display: grid;
                place-content: center;
        }
        .ani {
                grid-area: 1 / 1;
                display: grid;
                place-content: center;
                animation: var(--outer-duration) ani-outer var(--outer-timing-function)
                        infinite;
                animation-delay: calc(var(--outer-delay-factor) * var(--j) * -1);
        }
        .ani:nth-child(odd) > div {
                --clr: var(--clr-odd);
        }
        .ani > div {
                -.........完整代码请登录后点击上方下载按钮下载查看