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