div+css实现可爱猫咪抓球动画代码
代码语言:html
所属分类:动画
代码描述:div+css实现可爱猫咪抓球动画代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body{ background:black; } .container{ position:relative; width:800px; height:600px; background:#283144; margin:121px auto; padding-top:30px; } .gatito{ position:absolute; margin:-50px 0; } .circu{ position:relative; width:291px; height:90px; border-radius:100%; background:rgba(255,255,255,.1); margin:390px auto; } .cat{ position:absolute; display:block; width: 149px; height: 162px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background:#ccc; border:1px solid gray; border-top:3px solid gray; margin:-70px 70px; animation:baja9 3s alternate infinite; -moz-animation:baja9 3s alternate infinite; -webkit-animation: baja9 3s alternate infinite; } .head{ position:absolute; margin:3px -5px; animation:baja 3s alternate infinite; -moz-animation:baja 3s alternate infinite; -webkit-animation: baja 3s alternate infinite; } .head7{ position:absolute; display:block; width: 142px; height: 135px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background:#ccc; border:2px solid gray; margin:-192px 75px; } .ore{ position:absolute; width:70px; height:90px; border-radius:50px 500px 50px 500px; background:#94948c; transform: rotate(12deg); margin:-201px 50px; border:7px solid #d9d9d3; animation:sube3 3s alternate infinite; -moz-animation:sube3 3s alternate infinite; -webkit-animation:sube3 3s alternate infinite; } .ore3{ position:absolute; width:70px; height:90px; border-radius:500px 50px 500px 50px; background:#94948c; transform: rotate(-12deg); margin:-201px 158px; border: 7px solid #d9d9d3; animation:sube7 3s alternate infinite; -moz-animation:sube7 3 alternate infinite; -webkit-animation:sube7 3s alternate infinite; } .eyes{ position:absolute; width: 43px; height: 43px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background:white; border:1px solid black; margin:50px 12px; } .iris{ position:absolute; width:30px; height:30px; border-radius:100%; background:black; margin:0px 3px; animation:gira3 1s alternate infinite; -moz-animation:gira3 1s alternate infinite; -webkit-animation:gira3 1s alternate infinite; } iris::before{ content:""; position:absolute; width:7px; height:7px; border-radius:100%; background:white; margin:3px 5px; } .eyes3{ position:absolute; width: 43px; height: 43px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background:white; border:1px solid black; margin:50px 85px; } .iris3{ position:absolute; width:30px; height:30px; border-radius:100%; background:black; margin:0px 3px; animation:gira3 1s alternate infinite; -moz-animation:gira3 1s alternate infinite; -webkit-animation:gira3 1s alternate infinite; } iris3::before{ content:""; position:absolute; width:7px; height:7px; border-radius:100%; background:white; margin:3px 14px; } .nose{ position:absolute; width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 9px solid black; border-radius: 100px / 50px; margin:87px 62px; z-index:3335; animation:va 3s alternate infinite; -moz-animation:va 3s alternate infinite; -webkit-animation:va 3s alternate infinite; } .bocas3{ position:absolute; width:21px; height:12px; border-radius:0 0 30px 30px; background:#333; border:7px solid #333; margin:93px 55px; } .boqui{ position:absolute; width:35px; height:35px; border-radius:100%; background:#ddd; border-right:2px solid gray; margin:85px 35px; animation:va 3s alternate infinite; -moz-animation:va 3s alternate infinite; -webkit-animation:va 3s alternate infinite; } .boqui::before{ content:""; position:absolute; width:35px; height:35px; border-radius:100%; background:#ddd; border-left:2px solid gray; margin:0px 35px } .bigotitos{ position:absolute; width:90px; height:30px; border-radius:100%; border-bottom:2px solid black; margin:75px -12px; animation:va 3s alternate infinite; -moz-animation:va 3s alternate infinite; -webkit-animation:va 3s alternate infinite; } .bigotitos::before{ content:""; position:absolute; width:70px; height:21px; border-radius:100%; border-bottom:2px solid black; margin:13px 7px; transform: rotate(-12deg); } .bigotitos::after{ content:""; position:absolute; width:70px; height:21px; border-radius:100%; border-bottom:2px solid black; margin:18px 9px; transform: rotate(-21deg); } .bigotitos3{ position:absolute; width:90px; height:30px; border-radius:100%; border-bottom:2px solid black; margin:75px 60px; animation:va 3s alternate infinite; -moz-animation:va 3s alternate infinite; -webkit-animation:va 3s alternate infinite; } .bigotitos3::before{ content:""; position:absolute; width:70px; height:21px; border-radius:100%; border-bottom:2px solid black; margin:12px 12px; transform: rotate(12deg); } .bigotitos3::after{ content:""; position:absolute; width:70px; height:21px; border-radius:100%; border-bottom:2px solid black; margin:16px 13px; transform: rotate(25deg); } .legs{ position:absolute; width:35px; height:102px; border-radius:35px 35px 0 0; background:#bbb; border:1px solid gray; margin: 3px 86px; transform: rotate(12deg); animation:baja3 3s alternate infinite; -moz-animation:baja3 3s alternate infinite; -webkit-animation: baja3 3s alternate infinite; } .legs::before{ content:""; display:block; width:45px; height:30px; border-radius:43px; background:#94948c; border:1px solid #333; margin:90px -5px; transform: rotate(-9deg); } .legs3{ position:absolute; width:35px; height:102px; border-radius:35px 35px 0 0; background:#bbb; border:1px solid gray; margin: 3px 167px; transform: rotate(-12deg); animation:baja7 3s alternate infinite; -moz-animation:baja7 3s alternate infinite; -webkit-animation: baja7 3s alternate infinite; } .legs3::before{ content:""; display:block; width:45px; height:30px; border-radius:43px; background:#94948c; border:1px solid #333; margin:90px -5px; transform: rotate(9deg); } .legs7{ position:absolute; width:60px; height:60px; border-radius:60px 60px 0 0; background:#ccc; border:1px solid gray; margin:21px 55px } .legs7::before{ content:""; display:block; width:60px; height:30px; border-radius:21px; background:#94948c; margin:53px -12px } .legs9{ position:absolute; width:60px; height:60px; border-radius:60px 60px 0 0; background:#ccc; border:1px solid gray; margin:21px 170px } .legs9::before{ content:""; display:block; width:60px; height:30px; border-radius:21px; background:#94948c; margin:53px 12px } .cola{ position:absolute; width:30px; height:121px.........完整代码请登录后点击上方下载按钮下载查看
网友评论0