CSS+JS 实现水面起伏效果 并控制水面高度

一个小小demo 闲来无事听人说起 尝试了下做出来了  挺有意思的哈哈

逻辑很简单 就不解释了  相信看看代码就明白了

<style>
.box{
  width:200px;
  height:200px;
  border:1px solid black;
  position:fixed;
  top:20px;
  left:300px;
  overflow: hidden;
  border-radius:20px;
}

.box .circle{
  width:350px;
  height:350px;
  border-radius:130px;
  background-color:skyblue;
  position:absolute;
  left:-37%;
}

@keyframes continuous-rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.rotated-element {
    animation: continuous-rotation 5s linear infinite;
}

</style>

<div class="box">
	<div class="circle rotated-element" id='circle'></div>
</div>
<span>控制水位:</span><input type=range min=0 max=100 value=50 id='range'>

<script>
	let range = document.querySelector('#range');
let circle = document.querySelector('#circle');
circle.style.top = (100 - range.value)+'%';
range.addEventListener('input', function() {
    circle.style.top = (100 - range.value)+'%';
});
</script>