【CSS动画】css+js动态模拟波浪滚动小球的效果，如何设置动态的百分比

Question

CSS实现如图的波浪动态效果的小球

样式如下

<style>
  .wave {
    position: relative;
    width: 200px;
    height: 200px;
    background-color: rgb(118, 218, 255);
    border-radius: 50%;
  }:before,
    ::after{
        content: "";
        position: absolute;
        width: 400px;
        height: 400px;
        top: 0;
        left: 50%;
        background-color: rgba(255, 255, 255, .4);
        border-radius: 45%;
        transform: translate(-50%, -70%) rotate(0);
        animation: rotate 6s linear infinite;
        z-index: 10;
    }
     
    ::after {
        border-radius: 47%;
        background-color: rgba(255, 255, 255, .9);
        transform: translate(-50%, -70%) rotate(0);
        animation: rotate 10s linear -5s infinite;
        z-index: 20;
    }

 
@keyframes rotate {
    50% {
        transform: translate(-50%, -73%) rotate(180deg);
    } 100% {
        transform: translate(-50%, -70%) rotate(360deg);
    }
}
</style>

后台给你传一个数值 然后你控制动画效果里面蓝色的比例

Answer 1

很久以前做的，参考一下：https://codepen.io/Ariex/pen/...