div+css布局绘制太阳下草坪上的鸟儿吃鱼效果代码-html代码-BFW代码库

div+css布局绘制太阳下草坪上的鸟儿吃鱼效果代码

代码语言：html

代码描述：div+css布局绘制太阳下草坪上的鸟儿吃鱼效果代码

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

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

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

    <meta name="viewport" content="width=device-width, initial-scale=1">
<style>
    * { box-sizing:border-box; }
html, body{
   width: 100%;
   min-height: 100%;
   height:100%;
   margin:0;
   padding:0;
   overflow-x:hidden;
}
body{
   background: #88F0CF;
   background-repeat:no-repeat;
}
.sun{
   background-color:#fe4417;
   width:160px;
   height:160px;
   border-radius:50%;
   box-shadow:inset 0 0 60px orange, 0 0 10px yellow, 0 0 100px red, 0 0 100px yellow, 0 0 100px yellow, 0 0 100px yellow, 0 0 100px yellow;
   margin-left:70%;
   margin-top:20px;
}
#Bird{
   background-color:transparent;
   position:relative;
   margin-top:-90px;
}
.bh{
   height: 0;
   border-style: solid;
   border-width: 0px 80px 20px 20px;
   border-color: transparent #129881 transparent transparent;
   position:absolute;
   z-index:-1;
   margin-top:25px;
   margin-left:10px;
   transform:rotate(45deg);
}
.bh1{
   margin:0 auto;
   height: 0;
   border-style: solid;
   border-width: 0px 40px 23px 55px;
   border-color: transparent  #129881 transparent transparent;
   position:absolute;
   transform:rotate(-4deg);
   margin-top:13px;
   margin-left:-2px;
}
.head{
   margin:0 auto;
   background-color:    #18AD99;
   width:90px;
   height:130px;
   border-radius:0 80% 0 0;
   transform:rotate(-30deg);
}
.eye{
   background-color:black;
   width:8px;
   height:8px;
   border-radius:50%;
   position:absolute;
   margin-left:30px;
   margin-top:25px;
}
.nose{
   height: 0;
   border-style: solid;
   border-width: 22px 116px 0px 0;
   border-color: transparent #3F2A32 transparent transparent;
   position:absolute;
   margin-left:-90px;
   transform:rotate(25deg);
   margin-top:-22px;
}
.n1{
   height: 0;
   border-style: solid;
   border-width: 0px 116px 22px 0;
   border-color: transparent #653D3D transparent transparent;
   position:absolute;
   margin-top:1px;
   margin-left:10px;
}
.nn{
   background-color:#18AD99;
   width:13px;
   height:30px;
   position:absolute;
   margin-left:100px;
   margin-top:-25px;
   transform:rotate(-30deg);
}
.nn1{
   background-color:#18AD99;
   width:18px;
   height:25px;
   position:absolute;
   transform:rotate(40deg);
   margin-top:20px;
   margin-left:-9px;
}
.hair{
   background-color:#EB6C44;
   height:80px;
   width:20px;
   z-index:1;
   position:absolute;
   border-radius:0 90% 0 0 ;
   margin-left:20px;
   margin-top:65px;
}
.hair1{
    background-color:white;
   height:90px;
   width:18px;
   z-index:12;
   position:absolute;
   border-radius:0 90% 0 0 ;
   margin-left:15px;
   margin-top:12px;
}
.wings{
   background-color:#11B197;
   height:300px;
   width:150px;
   border-radius:500px 500% 100% 1000%;
   p.........完整代码请登录后点击上方下载按钮下载查看