у меня есть div вокруг которого ходит можно сказать "змейка" и мне нужно что бы у неё был некий эффект свечения, как это можно сделать ?
<!DOCTYPE html>
<html>
<head>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.box {
--deg: 0deg;
--box-size: 200px;
--radius: 8px;
--bweight: 3px;
height: 16.2vw;
width: 31vw;
background: conic-gradient(from var(--deg) at 50% 50%, rgb(236, 176, 255) 0%, rgb(236, 176, 255) 23.9999%, rgba(0, 0, 0, 0) 24%, rgba(0, 0, 0, 0) 100%);
border-radius: var(--radius);
display: grid;
place-items: center;
position: absolute;
transform: perspective(77vw) rotateY(31deg);
left: 25vw;
top: 16.7vw;
}
.item {
border-radius: var(--radius);
height: 15.6vw;
width: 30vw;
background: #b1cfcc;
text-align: center;
}
.TV{
position: absolute;
left: 10vw;
top: 10vw;
width: 50vw;
}
</style>
</head>
<body>
<div class="box">
<div class="item"></div>
</div>
<script>
let duration = 2000
let end = Date.now() + duration
const $box = document.querySelector(".box")
requestAnimationFrame(function ani() {
let dNow = end - Date.now()
if (dNow > 0) {
let percent = (100 - (dNow / duration * 100)).toFixed(2)
$box.style.setProperty('--deg', `${3.6*percent}deg`)
} else {
end = Date.now() + duration
}
requestAnimationFrame(ani)
})
</script>
</body>
</html>
Простой
