div+css布局实现可爱葡萄串效果代码-html代码-BFW代码库

代码语言：html

代码描述：div+css布局实现可爱葡萄串效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
  
<style>
body{
  background:#F9D066;
}
.container{
  position:relative;
  width:700px;
  height:700px;
  background:#F9D066;
  margin:3px auto;
 }
.uvas{
  position:absolute;
  margin:121px 0;
  animation:rotar 3s alternate infinite;
}
.tallo{
  position:absolute;
  width: 112px;
  height: 112px;
  border-top: 12px solid #429114;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-radius: 132px / 100px;
  transform:rotate(112deg);
  margin:0px 261px
}
.hojas{
  position:absolute;
  width:90px;
  height:90px;
  border-radius: 300px 3000px 300px 3000px;
  background:#299100;
  margin:-12px 380px;
  transform:rotate(90deg)
  }
.hojas::before{
  content:"";
  position:absolute;
  width:70px;
  height:70px;
  border-radius: 300px 3000px 300px 3000px;
  background:#0D8400;
  margin:9px 40px;
  transform:rotate(35deg)
}
.hojas::after{
  content:"";
  position:absolute;
  width:70px;
  height:70px;
  border-radius: 300px 3000px 300px 3000px;
  background:#0D8400;
  margin:37px 3px;
  transform:rotate(-21deg)
}
.u5,.u6,.u1,.u8{
  position:absolute;
  width:112px;
  height:112px;
  border-radius:100%;
  background:#AE3568;
  border-right:5px solid #8E094A;
  }
.u3,.u4,.u2,.u7,.u9,.u10{
  position:absolute;
  width:112px;
  height:112px;
  border-radius:100%;
  background:#65307B;
  border-right:5px solid #4B0766;
  }
.u2,.u10{background:#7B3C93}
.u8{background:#B74D7D;}
.u1{margin:102px 300px}
.u2{margin:172px 300px}
.u3{margin:162px 212px;}
.u4{margin:162px 390px}
.u5{margin:251px 370px;}
.u6{margin:251px 231px;}
.u7{margin:306px 261px}
.u8{margin:241px 300px}
.u9{margin:306px 345px}
.u10{margin:365px 305px}
.a1,.a2,.a3,.a4,.a5,.a6,.a7{
  position:absolute;
  width: 21px;
  height: 30px;
  border-right: 5px solid white;
  border-radius: 100%;
  z-index:333;
  transform:rotate(-45deg)
 }
.a1,.a3, .a4, .a5, .a6, .a7{margin:21px 73px}
.a2{margin:21px 251px}
.subir{
  position:absolute;
  animation:bajar 3s alternate infinite;
}
.bajar{
  position:absolute;
  animation:subir 3s alternate infinite;
}
.eyes,.eyes3{
  position:absolute;
  width:25px;
  height:25px;
  border-radius:100%;
  background:black;
  animation:cerrar 3s alternate infinite;
}
.iris{
  position:absolute;
  width:7px;
  height:7px;
  border-radius:100%;
  background:white;
  margin:3px 3px;
  animation:shake .21s alternate infinite;
}
.iris3{
  position:absolute;
  width:5px;
  height:5px;
  border-radius:100%;
  background:white;
  margin:13px 14px;
  animation:shake .21s alternate infinite;
}
.eyes{margin:45px 21px}
.eyes3{margin:45px 70px}
.boca,.boca9,.boca21{
  position:absolute;
  width:21px;
  height:12px;
  background:black;
  animation:go 3s alternate infinite;
}
.boca{
  border-radius:50px 50px 0 0;
  margin:70px -129px;
}
.boca21{
  border-radius:50px 50px 0 0;
  margin:70px 49px;
}
.boca9{
  border-radius:0 0 50px 50px;
  margin:70px 46px;
}
.boca5{
  position:absolute;
  width:19px;
  height:19px;
  border-radius:100%;
  background:black;
  margin:65px 229px;
  animation:go  3s alternate infinite;
  z-index:333;
}
.boca3,.boca7,.boca12{
  position:absolute;
  width:12px;
  height:6px;
  background:#C9006B;
  }
.boca3{border-radius:50px 50px 0 0;}
.boca7{border-radius:100%}
.boca12{border-radius:0 0 50px 50px ;}
.boca3{margin:3px 4px;}
.boca7{margin:7px 4px;}
.boca12{margin:5px 4px;}

@keyframes shake{
  0%{transform:scale(1)}
  50%{transform:scale(.9)}
  75%{transform:scale(1)}
  }
@keyframes cerrar {
  0%,25%{opacity:1}
  35%{opacity: 0}
  50%{opacity:1;}
  100%{opacity:1}
}
@keyframes go{
  0%{transform:scaleY(1)}
  50%{transform:scaleY(1.2)}
  }
@keyframes bajar{
  0%{transform:translateY(0px)}
  50%{transform:translateY(3px)}
}
@keyframes subir{
  0%{transform:translateY(0px)}
  50%{transform:translateY(-3px)}
}
@keyframes rotar {
  0%{transform:rotate(-3deg)}
  100%{transform:rotate(3deg)}
}
</style>

</head>

<body>
  <div class="container">
  <div class="uvas">
    <div class="tallo"></div>
    <div class="hojas"></div>
    <span class="u1">
        <div class="eyes">
            <div class="iris"></div>
            <div class="iris3"></div>
        </div>
        <div class="eyes3">
           <div class="iris"></div>
           <div class=".........完整代码请登录后点击上方下载按钮下载查看