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