console 命令行工具 X clear

console

let lines = document.querySelectorAll('.line');
lines.forEach((item,index)=>{
    item.style.transform = `rotate(${index * (360 / lines.length)}deg) translateX(20px)`;
    item.style.opacity = `${(index + 1) * (1 / lines.length)}`;
})
let kf = [];
let start = 0;
let count = 0;
for(let i = 0; i < lines.length; i++) {
    let opacity = (i+1)* (1 / lines.length);
    kf.push(opacity);
}

function an() {
    let index = start;
    for(let i = 0; i < lines.length; i++) {
        lines[index].style.opacity = kf[i];
        index++;
        if(index > lines.length - 1) {
            index = 0;
        }
    }
}
setInterval(()=>{
    an();
    start++;
    if(start > lines.length - 1) {
        start = 0;
    }
},50)

<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=, initial-scale=">
	<meta http-equiv="X-UA-Compatible" content="">
	<title></title>
</head>

<body>
	<div class="container">
		<div class="box">
			<div class="line"></div>
			<div class="line"></div>
			<div class="line"></div>
			<div class="line"></div>
			<div class="line"></div>
			<div class="line"></div>
			<div class="line"></div>
			<div class="line"></div>
			<div class="line"></div>
			<div class="line"></div>
			<div class="line"></div>
			<div class="line"></div>
            <div class="line"></div>
			<div class="line"></div>
			<div class="line"></div>
		</div>
	</div>
</body>

</html>

* {
    margin: 0;
    padding: 0;
}
.container {
    position: absolute;
    height: 200px;
    width: 200px;
    animation: load 2s infinite linear;
    transform-origin: center center;
}
.box {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100px;
    height: 100px;
    transform: translate(-50%,-50%);
}
.line {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 20px;
    height: 2px;
    background: #35c1ff;
    border-radius: 2px;
}