老师，您看，这个不一样的网站出来的效果是不一样的，这里有一部分挡住了

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" type="text/css" href="css/index.css"/>
</head>
<body>
  <div class="bule"id="bule">
   <div class="one"></div>
   <div class="two"></div>
   <div class="thr"></div>
   <div class="four"></div>
   <div class="five"></div>
  </div>
  <div class="green">
   <div class="pic"><img src="images/rabbit.png"/></div>
  </div>
</body>
</html>

*{
margin:0;
padding:0;
}
html{
width:100%;
height:100%;
}
body{
width:100%;
height:100%;
overflow: hidden;

}

.bule{
overflow: hidden;
position:relative;
height:60%;
background:linear-gradient(0deg,#fff 0%,rgb(196,228,253) 100%);
}
.bule>div{
position:absolute;
width:400px;
height:100px;
border-radius:100px/50px 50px 50px 50px;
background:#fff;

}
.bule>div:before{
  content:"";
  position:absolute;
  /* top:-20px; */
  left:11px;
  z-index:2;
  width:200px;
  height:100px;
  transform:rotate(60deg);
  border-radius:50px/50px;
  background:#fff;
  /* opacity: 0.8; */
  /* border:3px solid grey; */

}
.bule>div:after{
  content:"";
  position:absolute;
  top:-64px;
  left:126px;
  z-index:3;
  width:200px;
  height:200px;
  /* transform:rotate(60deg); */
  border-radius:50%;
  background:#fff;
   /* border:3px solid grey; */
}

.one{
margin-top:160px;
z-index:8;
right:-400px;
animation:one 7s ease-in infinite;

}

.two{
transform: scale(.6);
margin-top:18px;
right:15px;
opacity: 0.8;
z-index:4;
animation:two 10s ease-in infinite;
}

.thr{
transform: scale(.6);
margin-top:288px;
right: -250px;
z-index:4;
opacity: 0.7;
animation:three 9s ease-in infinite;
}

.four{
transform: scale(.6);
margin-top:18px;
z-index:4;
opacity: 0.6;
right:-400px;
animation:four 15s ease-out 3s infinite;
}

.five{
transform: scale(.4);
margin-top:288px;
right:-400px;
opacity: 0.7;
z-index:4;
animation:five 20s linear 6s infinite;
}

.green{
overflow: hidden;
position:relative;
height:40%;
background:linear-gradient(180deg,#fff 0%,rgb(148,190,89) 100%);
}
.pic{
position:absolute;
bottom: 50px;
right:200px;
amimation:robbit 10s linear infinite;

}
img{
display: block;
height:200px;
width:200px;

}
/* 动画 */
@keyframes one{
0%{right:-400px;}
100%{right:100%;}
}
@keyframes two{
0%{right:15px;}
100%{right:100%;}
}
@keyframes three{
0%{right:-250px;}
100%{right:100%;}
}
@keyframes four{
0%{right:-400px;}
100%{right:100%;}
}
@keyframes five{
0%{right:-400px;}
100%{right:100%;}
}
@keyframes robbit{
0%{right:200px;}
25%{right:400px;}
50%{right:900px;}
75%{right:400px;}
100%{right:200px;}
}