div+css实现圆环均衡器跳动动画效果代码-html代码-BFW代码库

div+css实现圆环均衡器跳动动画效果代码

代码语言：html

所属分类：动画

代码描述：div+css实现圆环均衡器跳动动画效果代码

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

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

<head>
    <meta charset="UTF-8">
 
    <style>
        html {
        overflow:hidden;
}
body {
        background:#000;
}
.spike {
        --sx:calc(var(--i)/var(--n));
        position:absolute;
        top:calc(50% - 0.125em);
        left:50%;
        width:4em;
        height:0.25em;
        transform-origin:0 50%;
        transform:rotate(calc(var(--i)*1turn/var(--n))) translate(calc(0.25em/var(--f))) scalex(var(--sx));
        background:currentcolor;
        color:HSL(calc(var(--i)*3*360/var(--n)),100%,75%);
        animation:a 9s ease-in-out calc(var(--i)/var(--n)*-18s) infinite;
}
.spike:before,.spike:after {
        --k:0;
        --s:calc(2*var(--k) - 1);
        position:absolute;
        top:calc(50% - 0.125em);
        left:calc(var(--k)*100% - 0.125em);
        width:0.25em;
        height:0.25em;
        border-radius:50%;
        transform:scalex(calc(1/var(--sx)));
        background:inherit;
        content:"";
}
.spike:after {
        --k:1;
}
.spike:nth-child(2n):before,.spike:nth-child(2n):after {
        box-shadow:calc(var(--s)*0.5em) 0 0 -1px currentcolor;
}
@keyframes a {
        0% {
        --sx:0.55;
}
2.77778% {
        --sx:0.66079;
}
5.55556% {
        --sx:0.86715;
}
8.33333% {
        --sx:0.35514;
}
11.11111% {
        --sx:0.80854;
}
13.88889% {
        --sx:0.62231;
}
16.66667% {
        --sx:0.55;
}
19.44444% {
        --sx:0.58848;
}
22.22222% {
        --sx:0.60861;
}
25% {
        --sx:0.55;
}
27.77778% {
        --sx:0.49139;
}
30.55556% {
        --sx:0.51152;
}
33.33333% {
        --sx:0.55;
}
36.11111% {
        --sx:0.47769;
}
38.88889% {
        --sx:0.29146;
}
41.66667% {
        --sx:0.74486;
}
44.44444% {
        --sx:0.23285;
}
47.22222% {
        --sx:0.43921;
}
50% {
        --sx:0.55;
}
52.77778% {
        --sx:0.43921;
}
55.55556% {
        --sx:0.23285;
}
58.33333% {
        --sx:0.74486;
}
61.11111% {
        --sx:0.29146;
}
63.88889% {
        --sx:0.47769;
}
66.66667% {
        --sx:0.55;
}
69.44444% {
        --sx:0.51152;
}
72.22222% {
        --sx:0.49139;
}
75% {
        --sx:0.55;
}
77.77778% {
        --sx:0.60861;
}
80.55556% {
        --sx:0.58848;
}
83.33333% {
        --sx:0.55;
}
86.11111% {
        --sx:0.62231;
}
88.88889% {
        --sx:0.80854;
}
91.66667% {
        --sx:0.35514;
}
94.44444% {
        --sx:0.86715;
}
97.22222% {
        --sx:0.66079;
}
100% {
        --sx:0.55;
}
}
    </style>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/prefixfree.js"></script>
</head>

<body>
    <style>
        :root {         --n: 128;       --f: 0.024548622108925444  }
    </style>
    <div class="spike" style="--i: 127;"></div>
    <div class="spike" style="--i: 126;"></div>
    <div class="spike" style="--i: 125;"></div>
    <div class="spike" style="--i: 124;"></div>
    <div class="spike" style="--i: 123;"></div>
    <div class="spike" style="--i: 122;"></div>
    <div class="spike" style="--i: 121;"></div>
    <div class="spike" style="--i: 120;"></div>
    <div class="spike" style="--i: 119;"></div>
    <div class="spike" style="--i: 118;"></div>
    <div class="spike" style="--i: 117;"></div>
    <div class="spike" style="--i: 116;"></div>
    <div class="spike" style="--i: 115;"></div>
    <div class="spike" style="--i: 114;"></div>
    <div class="spike" style="--i: 113;"></div>
    <div class="spike" style="--i: 112;"></div>
    <div class="spike" style="--i: 111;"></div>
    <div class="spike" style="--i: 110;"></div>
    <div class="spike" style="--i: 109;"></div>
    <div class="spike" style="--i: 108;"></div>
    <div class="spike" style="--i: 107;"></div>
    <div class="spike" style="--i: 106;"></div>
    <div class="spike" style="--i: 105;"></div>
    <.........完整代码请登录后点击上方下载按钮下载查看