gsap小女孩生日快乐动画-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：gsap小女孩生日快乐动画

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


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

<style>
body
{
  background:#621F5E;
}
.bcg
{
  background:orange;
  width:300px;
  height:500px;
  margin:auto;
  position:absolute;
  left:0;
  right:0;
}
.table
{
 border-bottom: 130px solid  #933C3C;
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
            height: 0;
  border-radius:20px;
            width: 308px;
            position: relative;
            top:380px;
  right:23px;
            
}
.legs,.legs-1,.legs-2,.legs-3
{
  position:absolute;
  top:130px;
  width:10px;
  height:100px;
  background:black;
  border-bottom-left-radius:50px;
   border-bottom-right-radius:50px;
}
.legs-1
{
  left:300px;
  
}
.legs-2
{
  height:50px;
  left:50px;
}
.legs-3
{
  height:50px;
  left:250px;
}
.girl{
  position:absolute;
  top:50px;
}


.hair1{
            height: 70px;
            width: 140px;
            border-top-left-radius:70px;
            border-top-right-radius:70px;
            background-color: black;
            position: relative;
            top:30px;
            left:95px;
        }
        .hair2{
            width: 140px;
            height:180px;
            background-color:black;
            position: relative;
            border-radius: 0px 0px 60px 60px;
            top:62.5px;
        }
        .face{
            background-color: #ffecb3;
            height: 90px;
            width: 110px;
            border-bottom-left-radius:70px;
            border-bottom-right-radius:70px;
            position: relative;
            left:15px;

        }
        .eyel{
            background-color: white;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            position: relative;
            top:16px;
            left:9px;
            
        }
        
        .eyer{
            background-color: white;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            position: relative;
            bottom: 14px;
            left:70px;
        }
        .eyeball1,.eyeball2{
            position: relative;
            height: 20px;
            width: 20px;
            background-color: black;
            border-radius: 50%;
            top:4px;
            left:4.5px;
        }
  .dot1,.dot3{
            width:8px;
            height: 8px;
            border-radius: 50%;
            background-color: white;
            position: relative;
            top:4px;
        }
        .dot1{
            left:2px;
        }
        .dot3{
            left:10px;
        }
        .dot2,.dot4{
            width: 3px;
            height: 3px;
            background-color: white;
            position: relative;
            top:4px;
            border-radius: 50%;
        }
        .dot2{
            left:14px;
        }
        .dot4{
            left:5px;
        }
        .belt{
            background-color: green;
            height: 55px;
            width: 110px;
            border-top-left-radius:70px;
            border-top-right-radius:70px;
            bottom: 143px;
            left:14.5px;
            position: relative;
        }
        .belt1{
            background-color: black;
            height: 56px;
            width: 112px;
            border-top-left-radius:70px;
            border-top-right-radius:70px;
            position: relative;
            left:-0.5px;
            top:7px;
        }
        .mouth{
            background-color: red;
            height: 25px;
            width: 50px;
            left:29px;
            bottom: 5px;
            border-bottom-left-radius:70px;
            border-bottom-right-radius:70px;
            position: relative;
        }
.dress{
  z-index:100;
            background: repeating-linear-gradient(45deg,black,red 20px,green 10px);
            width:120px;
            height:130px;
            border-radius:35px 35px 0px 0px ;
            position: relative;
            top:18px;
            right: 6px;
        }
        .neck{
            background-color: #ffecb3;
            position: relative;
            height:40px;
            width: 30px;
            border-radius: 0px 0px 15px 15px;
            bottom:130px;
            left:40px;
        }
        .earl,.earr{
            background-color: #ffecb3;
            position: relative;
            height: 10px;
            width: 20px;
            
            border-top-left-radius:70px;
            border-top-right-radius:70px;
        }
        .earl{
            transform:rotate(-90deg);
            right:5px;
            bottom:118px;
        }
        .earr{
            transform:rotate(90deg);
            left:124px;
            bottom:127px;
        }
.hand-1,.hand-2
{
  position:absolute;
  width:25px;
  height:120px;
  background:#FFECB3;
  border-radius:50px;
}
.hand-1
{
  top:115px;
  left:-42px;
  transform:rotate(40deg);
}
.hand-2
{
  top:110px;
  left:120px;
  transform:rotate(140deg);
}
.cake{
            background-color: #ff6666;
            width:180px;
            height: 70px;
            z-index:510;
            position: relative;
            top:300px;
            left:70px;
        }
        .strip1{
            width: 180px;
            height: 10px;
            background-color: #ffffb3;
            position: relative;
            top:30px;
        }
        .cake1{
            background-color: #FF6666;
            width:140px;
            height: 60px;
            bottom:70px;
            left:22px;
            p.........完整代码请登录后点击上方下载按钮下载查看