css+div布局生成鸡生蛋卡通效果代码-html代码-BFW代码库

代码语言：html

代码描述：css+div布局生成鸡生蛋卡通效果代码

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

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

<head>
  <meta charset="UTF-8">
  

  
  
  
<style>
html,body,.container{
  margin:0;
  padding:0;
  height:100vh;
}

body{
  background:#FFD780;
}

*{
  margin:0;
  padding:0;
}

.container{
  display:grid;
  place-items:center;
}

.birth-container{
  display:grid;
  place-items:center;
  height:368px;
  width:766px;
}

.fence-container{
  display:flex;
  justify-content:space-between;
  height:208px;
  width:766px;
}

.fence{
  display:block;
  height:208px;
  width:59px;
  background:#FFCE65;
  clip-path:
    polygon(0 12%, 50% 0, 100% 12%, 100% 100%, 0 100%);
}

.fence:after{
  content:"";
  display:flex;
  height:10px;
  width:10px;
  background:#FFD780;
  border-radius:50%;
  transform:translate(8px,42px);
  box-shadow: 32px 3px #FFD780 ;
}

/*------------------------*/

.birds-container{
  display:flex;
  z-index:2;
  justify-content:space-between;
  align-items:end;
  height:269px;
  width:664px;
  transform:translate(-24px,-131px);
}

.rooster-container{
  display:grid;
  justify-content:center;
  height:269px;
  width:229px;
}

/*------------------------*/

.rooster-crest-container{
  display:flex;
  justify-content:center; 
  height:40px;
  width:60px;
  transform:translate(136px,0px);
}

.rooster-crest{
  display:grid;
  height:40px;
  width:20px;
  background:#F54748;
  border-radius:20px 0 0 0;
}

.rooster-crest:before{
  content:"";
  display:grid;
  height:40px;
  width:20px;
  background:#F54748;
  border-radius:20px 0 0 0;
  transform:translate(-16px,10px) rotate(-30deg);  
}

.rooster-crest:after{
  content:"";
  display:grid;
  height:40px;
  width:20px;
  background:#F54748;
  border-radius:20px 0px 0 0;
  transform:translate(12px,-30px) rotate(30deg);
}

/*------------------------*/

.rooster-body-container{
  display:grid;
  height:216px;
  width:185px;
/*   background:crimson; */
  transform:translate(10px,-124px);
}

.rooster-head{
  display:flex;
  justify-self:end;
  justify-content:center;
  height:134px;
  width:60px;
  background:white;
  border-radius:30px 30px 0 0;
}

.rooster-eye{
  display:block;
  height:12px;
  width:12px;
  background:#414141;
  border-radius:50%;
  transform:translate(18px,14px);
}

.rooster-beak{
  transform:translate(23px,26px);
}

.rooster-body{
  display:flex;
  z-index:2;
  height:82px;
  width:185px;
  background:white;
  border-radius:0 0 82px 82px;
}

.rooster-wing{
  display:block;
  height:80px;
  width:138px;
  background:#DCDCDC;
  border-radius:0 50px 50px 68px;
  transform:translate(28px,-49px);
}

/*------------------------*/

.feather-container{
  display:flex;
  height:110px;
  width:74px;
  transform:translate(-22px,10px);
}

.rooster-feather{
  display:grid;
  height:126px;
  width:18px;
  background:#F54748;
  border-radius:22px 0 0 0;
  transform:translate(24px,-4px) rotate(-30deg);
  box-shadow:-16px 28px #F65C5C;
}

/*------------------------*/

.rooster-paw-container{
  display:flex;
  justify-self:center;
  height:56px;
  width:80px;
/*   background:red; */
  transform:translate(12px,-153px);
}

.rooster-front-paw{
  display:grid;
  z-index:3;
  height:56px;
  width:47px;
}

.rooster-f-paw{
  display:grid;
  height:56px;
  width:14px;
  background:#FFA83E;
  border-radius: 7px 7px 0 0;
  transform:translate(10px);
}

.rooster-f-paw:after{
  content:"";
  display:grid;
  align-self:end;
  height:10px;
  width:47px;
  background:#FFA83E;
  border-radius:7px; 
  transform:translate(-10px);
}

.rooster-behind-paw{
  display:grid;
  height:56px;
  width:34px;
}

.rooster-b-paw{
  display:grid;
  height:56px;
  width:14px;
  background:#FF9714;
  border-radius: 7px 7px 0 0;
  transform:translate(0px);
}

.rooster-b-paw:before{
  content:"";
  display:block;
  height:28.8px;
  width:20px;
  border-radius: 0 0 10px 0;
  background:white;
}

.rooster-b-paw:after{
  content:"";
  display:grid;
  align-self:end;
  height:10px;
  width:47px;
  background:#FF9714;
  border-radius: 7px;
  transform:translate(-12px);
}

/*------------------------*/

.chicken-container{
  display:grid;
  justify-content:end;
  height:252px;
  width:196px;
}

.chicken-crest-container{
  display:grid;
  justify-content:center;
  height:40px;
  width:50px;
  transform:translate(4px);
}

.chicken-crest{
  display:grid;
  height:40px;
  width:20px;
  background:#F54748;
  border-radius:10px 10px 0 0;
}

.chicken-crest:before{
  content:"";
  display:grid;
  height:40px;
  width:20px;
  background:#F54748;
  border-radius:10px 10px 0 0;
  transform:rotate(-15deg) translate(-14px,2px);
}

.chicken-crest:after{
  content:"";
  display:grid;
  height:40px;
  width:20px;
  background:#F54748;
  border-radius:10px 10px 0 0;
  transform:rotate(15deg) translate(3px,-36px);
}

/*------------------------*/

.chicken-body-container{
  display:grid;
  height:199px;
  w.........完整代码请登录后点击上方下载按钮下载查看