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

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

样式如下

.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);

}

}

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