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

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

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