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

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

代码语言：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{bac.........完整代码请登录后点击上方下载按钮下载查看