当前位置：首页 > news >正文

[前端]DOM+CSS+HTML实现水波进度效果

news 2025/5/16 14:00:49

效果展示：
在这里插入图片描述

代码：

<!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>