效果展示：
代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.round{width: 100px;height: 100px;border-radius: 100%;border: 1px solid;position: relative;overflow: hidden;}.round::after{content: "";width: 200px;height: 200px;background-color:#41c4f8 ;border-radius: 80px;position: absolute;left: -50px;top: var(--top, 100px);;animation:rote 4s linear infinite ;}@keyframes rote {form{transform: rotate(0);}to{transform: rotate(360deg);}}</style>
</head>
<body><div class="containers"><div class="round"></div><input type="range" min="0" max="100" value="0" onchange="change()" ></div>
</body>
<script>// 1、dom实现动态修改伪元素的样式var rangeDom = document.querySelector('input') var roundDom = document.querySelector('.round')function change(){ roundDom.style.setProperty('--top',(100-rangeDom.value)+'px') }
</script>
</html>
)