gsap小女孩生日快乐动画
代码语言: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-bo.........完整代码请登录后点击上方下载按钮下载查看
网友评论0