纯css布局实现绿植效果-html代码-BFW代码库

纯css布局实现绿植效果

代码语言：html

代码描述：纯css布局实现绿植效果

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body{
  background: #fbe6d4;
}
.wrapper{
  position: absolute;

  height: 250px;
  width: 700px;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}


.container1{
  position: absolute;
  display: inline-block;
  width: 180px;
  height: 250px;;
  background: #fbe6d4;
margin: 20px;

}

.container2{
  position: absolute;
   left: 200px;
  display: inline-block;
  width: 180px;
  height: 250px;;
  background: #fbe6d4;
  z-index: -2;
   margin: 20px;
}

.container3{
 position: absolute;
   left: 400px;
  display: inline-block;
  width: 180px;
  height: 250px;;
  background: #fbe6d4;
   margin: 20px;
}

.line1{
    width: 140px;
    height: 100px;
 background: #fbe6d4;
  position: relative;
  top: 40px;
  left: 20px;
  z-index:1;
  overflow: hidden; 
}

.pot2{
  position: relative;
  height: 130px;
  width: 130px;
  background: linear-gradient(to right, #f6ad7b 50%, #ed9a73 50%);
 left: 19px;
  top: 20px;
 
border-radius: 50% ;
  overflow: hidden;

}

.line2{
 top: 100px;
 width: 130px;
 height: 20px;
 background: #fbe6d4;
 position: relative; 
 z-index:1;
}


.leaf1, .leaf2, .leaf3{
  width: 80px;
  height: 80px;
  background: green;
  position: relative;
  border-radius: 150px 0;
  background: linear-gradient(-45deg,  #5c7658 50%, #649d66 50%);

}

.leaf3{
   transform: rotate(-15deg);
bottom: 130px;
  left: 53px;
}

.leaf2{
  transform: rotate(-45deg);
  z-index:1;
  bottom: 65px;
  left: 25px;
}

.leaf1{ 
   transform: rotate(-75deg);
  top: 30px;
  right: 4px;
 
}
.line{
  position: relative;
  width: 120px;
  height: 20px;
    background: linear-gradient(to right, #f6ad7b 50%, #ed9a73 50%);
  border-radius: 5px;
  top: 40px;
  left: 25px; 
  z-index: 1;
}

.pot1, .pot3{
  position: relative;
    height: 90px;
  width: 100px;
  top: 20px;
  left: 34px;
  
  background: linear-gradient(to right, #f6ad7b 50%, #ed9a73 50%);
  clip-path: pol.........完整代码请登录后点击上方下载按钮下载查看