使用css实现水球效果

通过在制定overflow:hidden的元素上添加非常大圆形,而且圆形设置圆角,并不断滚动,数量多了就可以显示出水波效果
<!DOCTYPE html>
<html>
<head>
<style>
@keyframes roll {
   
    form {
   
        transform: rotate(0deg);
    }
    to {
   
        transform: rotate(360deg);
    }
}
.shuiqiu {
   
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 5px solid #607d8b;
    margin: 100px auto;
    position: relative;
    overflow: hidden;
}
.shuiqiucontent {
   
    width: calc(100% - 

你可能感兴趣的:(html,css,动画)