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