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

代码语言：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>
    <div class="spike" style="--i: 104;"></div>
    <div class="spike" style="--i: 103;"></div>
    <div class="spike" style="--i: 102;"></div>
    <div class="spike" style="--i: 101;"></div>
    <div class="spike" style="--i: 100;"></div>
    <div class="spike" style="--i: 99;"></div>
    <div class="spike" style="--i: 98;"></div>
    <div class="spike" style="--i: 97;"></div>
    <div class="spike" style="--i: 96;"></div>
    <div class="spike" style="--i: 95;"></div>
    <div class="spike" style="--i: 94;"></div>
    <div class="spike" style="--i: 93;"></div>
    <div class="spike" style="--i: 92;"></div>
    <div class="spike" style="--i: 91;"></div>
    <div class="spike" style="--i: 90;"></div>
    <div class="spike" style="--i: 89;"></div>
    <div class="spike" style="--i: 88;"></div>
    <div class="spike" style="--i: 87;"></div>
    <div class="spike" style="--i: 86;"></div>
    <div class="spike" style="--i: 85;"></div>
    <div class="spike" style="--i: 84;"></div>
    <div class="spike" style="--i: 83;"></div>
    <div class="spike" style="--i: 82;"></div>
    <div class="spike" style="--i: 81;"></div>
    <div class="spike" style="--i: 80;"></div>
    <div class="spike" style="--i: 79;"></div>
    <div class="sp.........完整代码请登录后点击上方下载按钮下载查看