運行效果
代碼
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<style>
body {
background-color: #3D4852;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow-x: hidden; overflow-y: hidden;
}
.container {
display: flex;
justify-content: center;
align-items: center;
position: relative;
height: 100px;
width: 100px;
}
.radial {
position: absolute;
height: 10px;
width: 30px;
border-radius: 5px;
background-color: #606F7B;
left: -15px;
transform: rotate(0deg);
transform-origin: 65px;
transition:background 1s, box-shadow 1s;
}
.glow{
background: #51D88A;
box-shadow: 0 0 25px 2px #A2F5BF;
}
.radial:nth-child(1){transform: rotate(0deg);}
.radial:nth-child(2){transform: rotate(45deg);}
.radial:nth-child(3){transform: rotate(90deg);}
.radial:nth-child(4){transform: rotate(135deg);}
.radial:nth-child(5){transform: rotate(180deg);}
.radial:nth-child(6){transform: rotate(225deg);}
.radial:nth-child(7){transform: rotate(270deg);}
.radial:nth-child(8){transform: rotate(315deg);}
</style>
</head>
<body>
<div class="container">
<div class="radial"></div>
<div class="radial"></div>
<div class="radial"></div>
<div class="radial"></div>
<div class="radial"></div>
<div class="radial"></div>
<div class="radial"></div>
<div class="radial"></div>
</div>
<script>
let radial = document.getElementsByClassName('radial');
let i = 0;
setInterval(function () {
for(let i = 0;i<radial.length;i++){
radial[i].className = 'radial';
}
radial[i++].className += ' glow'
if(i === 8){
i=0;
}
},500);
</script>
</body>
</html>