js 水波纹小球

HTML&JS

    <div class="container" style="--optop:0%">
        <span></span>
    </div>
    <input type="range" class="optop" value="0">
    <script>
        // 获取元素
        var optop = document.querySelector('.optop');
        var container = document.querySelector('.container');
        var span = document.querySelector('.container span');
        // 初次加载
        container.style.setProperty('--optop',optop.value+'%');
        span.innerText = optop.value;
        // 拖动
        optop.oninput = function(){
            container.style.setProperty('--optop',this.value+'%');
            span.innerText = this.value;
        }
    </script>

SASS

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #efefef;
}
.container{
    width: 5vw;
    height: 5vw;
    position: relative;
    overflow: hidden;
    border-radius: 15vw;
    background-color: aqua;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 3px solid #fff;
    &::before{
        content: '';
        display: block;
        width: 10vw;
        height: 10vw;
        background: red;
        border-radius: 40%;
        position: absolute;
        top: calc(100% - var(--optop));
        left: 50%;
        translate: -50% 0;
        animation: move 3s linear infinite;
    }
    span{
        z-index:1;
    }
}
.optop{
   margin-top: 20px;
}

@keyframes move{
    100%{
        transform: rotate(360deg);
    }
}

效果：