css实现可爱小老虎玩皮球动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现可爱小老虎玩皮球动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> html, body { height: 100%; width: 100%; overflow: hidden; padding: 0; margin: 0; } body { background: #3BA99C; display: flex; } * { position: absolute; } *:before, *:after { position: absolute; content: ""; } .box { position: relative; background: #33658A; width: 500px; height: 500px; margin: auto; border-radius: 50%; } .ball { width: 150px; height: 150px; top: 41%; left: 45%; border-radius: 50%; background-color: #EE6352; box-shadow: inset -10px -10px 0px #c62714; animation: toss 3s ease infinite; } .tail { position: absolute; width: 200px; height: 100px; background: transparent; top: 61%; left: 72%; transform-origin: left center; transform: rotate(-20deg); animation: flick 1s ease infinite; } .tail .tail-1 { position: absolute; width: 35%; height: 20%; background: orange; bottom: 0; } .tail .tail-2 { position: absolute; width: 30%; height: 20%; background: orange; transform: rotate(-20deg); left: 30%; top: 73%; border-radius: 0 50% 50% 30%; overflow: hidden; } .tail .tail-2 .end { position: absolute; background: black; width: 30%; height: 100%; right: 0; } .tail .tail-3 { position: absolute; width: 25%; height: 60%; background: orange; left: 60%; top: 20%; border-radius: 50% 50% 50% 0%; } .body { position: absolute; width: 200px; height: 110px; background: orange; border-radius: 40% 40% 40% 50%; top: 68%; left: 39%; transform: rotate(-15deg); } .body .arm-1 { position: absolute; background: orange; height: 80px; width: 43px; left: 35%; top: -70%; transform-origin: bottom center; transform: rotate(35deg); border-radius: 50%; border-top: solid 1px black; border-left: solid 1px black; border-right: solid 1px black; animation: arm1 1.5s ease infinite; } .body .leg-1 { background: orange; height: 80px; width: 43px; border-radius: 50%; position: absolute; top: -50%; left: 80%; border-top: solid 1px black; border-left: solid 1px black; border-right: solid 1px black; transform-origin: bottom center; transform: rotate(-20deg); animation: leg1 1.5s ease infinite; } .arm-2 { background: orange; height: 80px; width: 43px; border-radius: 50%; position: absolute; top: 68%; left: 48%; border-top: solid 1px black; border-left: solid 1px black; border-right: solid 1px black; transform-origin: bottom center; transform: rotate(0deg); animation: arm2 1.5s ease infinite; } .leg-2 { background: orange; height: 80px; width: 43px; border-radius: 50%; position: absolute; top: 65%; left: 68%; border-top: solid 1px black; border-left: solid 1px black; border-right: solid 1px black; transform-origin: bottom center; transform: rotate(0deg); animation: leg2 1.5s ease infinite; } .tiger { position: relative; top: 55%; left: 15%; } .tiger .head-copy { width: 200px; height: 150px; position: absolute; background: orange; border-radius: 90% 90% 50% 50%; transform: rotate(-45deg); animation: tilt 2s ease infinite; } .tiger .head-copy .l-ear { width: 35%; height: 40%; background: orange; top: -5%; left: -12%; border-radius: 50%; transform: rotate(-25deg); } .tiger .head-copy .l-ear .ear-center { position: absolute; background: pink; width: 70%; height: 70%; border-radius: 50%; top: 20%; left: 15%; } .tiger .head-copy .r-ear { width: 35%; height: 40%; background: orange; top: -5%; right: -12%; border-radius: 50%; transform: rotate(25deg); } .tiger .head-copy .r-ear .ear-center { position: absolute; background: pink; width: 70%; height: 70%; border-radius: 50%; top: 20%; right: 15%; } .tiger .head { width: 200px; height: 150px; position: absolute; background: orange; border-radius: 90% 90% 50% 50%; overflow: hidden; transform: rotate(-45deg); border-right: solid 1px black; border-bottom: solid 1px black; animation: tilt 2s ease infinite; } .tiger .head .x-stripe-1 { width: 30%; height: 8%; background: black; position: absolute; top: 10%; left: 35%; border-radius: 50%; } .tiger .head .x-stripe-2 { width: 25%; height: 8%; background: black; position: absolute; top: 25%; left: 38%; border-radius: 50%; } .tiger .head .y-stripe { width: 5%; height: 50%; background: black; border-radius: 50%; left: 48%; top: -7%; } .tiger .head .l-stripe-1 { width: 15%; height: 10%; background: black; top: 45%; left: -2%; border-radius: 0 50% 50% 0; transform: rotate(15deg); } .tiger .head .l-stripe-2 { width: 15%; height: 10%; background: black; top: 65%; left: -2%; border-radius: 0 50% 50% 0; transform: rotate(-15deg); } .tiger .head .r-stripe-1 { width: 15%; height: 10%; background: black; top: 45%; right: -2%; border-radius: 50% 0 0 .........完整代码请登录后点击上方下载按钮下载查看
网友评论0