css实现兔子小鸡跳动动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现兔子小鸡跳动动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { background-color: #00bcd4; margin: 0; } .ground { background-color: #8bc34a; position: absolute; bottom: 0; width: 100%; height: 150px; } /* * Rabbit */ .rabbit { position: absolute; bottom: 120px; left: 150px; } .rabbit > * { --transform: translate3d(0,0,0); animation: 10s jumpBody infinite; } .rabbit .ear { height: 20px; width: 100px; background-color: #fff; border-radius: 10px; position: absolute; right: -15px; top: -27px; transform-origin: bottom right; --transform: rotate(10deg); transform: var(--transform); } .rabbit .ear.ear-left { background-color: #a9d9ff; --transform: rotate(25deg); transform: var(--transform); top: -25px; } .rabbit .body { height: 75px; width: 75px; background-color: #fff; border-radius: 50%; position: relative; } .rabbit .head { height: 60px; width: 60px; background-color: #fff; border-radius: 50%; position: absolute; top: -35px; right: -35px; } .rabbit .head .eye { background-color: #AA4FCC; position: absolute; top: 30px; left: 20px; height: 8px; width: 8px; border-radius: 50%; animation: 5s rabbitEye infinite; } .rabbit .tail { height: 20px; width: 20px; background-color: #fff; border-radius: 50%; position: absolute; left: -16px; bottom: 17px; } .rabbit .legs { height: 15px; width: 60px; background-color: #fff; border-radius: 8px; position: absolute; bottom: 0; left: 30px; transform-origin: left; animation: 10s jumpLegs infinite; } .rabbit:before { content: ""; width: 150px; height: 20px; border-radius: 50%; background-color: rgba(0,0,0,0.3); position: absolute; bottom: -5px; left: -20px; animation: 10s jumpShadow infinite; } @keyframes rabbitEye { 2%{height: 4px;top: 32px;} 4%{height: 8px;top: 30px;} } @keyframes jumpBody { 4% {transform: var(--transform);} 8% {transform: translate3d(0, -50px, 0) var(--transform);} 16% {transform: var(--transform);} } @keyframes jumpLegs { 4% {transform: rotate(0);} 6% {transform: rotate(20deg);} 10% {transform: rotate(0);} } @keyframes jumpShadow { 4% {width: 150px;left: -20px;} 8% {width: 130px; left: -10px;} 16% {width: 150px;left: -20px;} } /* * Egg */ .egg { position: absolute; bottom: 110px; left: 400px; transform-origin: bottom; } .egg .dance { position: absolute; bottom: 20px; animation: 2s dance linear infinite; } .egg .body { width: 150px; height: 200px; background-color: #fff; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; box-shadow: -10px 10px 0 10px #eee; position: relative; } .egg .eye { position: absolute; height: 10px; width: 10px; border-radius: 50%; background-color: #000; top: 120px; left: 85px; animation: 7s eggEye 3s infinite; } .egg .eye-left { left: 45px; } .egg .mouth { width: 30px; height: 15px; background-color: #000; border-radius: 0 0 30px 30px; position: absolute; top: 135px; left: 55px; overflow: hidden; } .egg .tongue { height: 15px; width: 15px; background-color: red; position: absolute; top: 8px; left: 8px; border-radius: 50%; } .egg .arm { height: 10px; width: 60px; position: absolute; background-color: #000; border-radius: 5px; top: 140px; animation: 1s danceArms linear infinite; } .egg .arm-left { transform-origin: right; transform: rotate(20deg); --to: rotate(-20deg); left: -70px; } .egg .arm-right { transform-origin: left; --transform: rotate(-20deg); --to: rotate(20deg); transform: var(--transform); right: -50px; } .egg .leg-left { height: 50px; width: 10px; position: absolute; background-color: #000; border-radius: 5px; transform-origin: right; --transform: rotate(20deg); transform: var(--transform); bottom: -50px; left: 30px; } .egg .leg-right { height: 50px; width: 10px; position: absolute; background-color: #000; border-radius: 5px; transform-origin: left; transform: rotate(-20deg); bottom: -50px; right: 50px; } .egg:before { content: ""; width: 130px; height: 20px; border-radius: 50%; background-color: rgba(0,0,0,0.3); position: absolute; bottom: -60px; left: -10px; animation: 2s danceShadow linear infinite; } @keyframes eggEye { 2%{height: 4px;top: 123px;} 4%{height: 10px;top: 120px;} } @keyframes dance { 25% { bottom: 0px; transform: rotate(10deg); } 50% {bottom: 20px;} 75.........完整代码请登录后点击上方下载按钮下载查看
网友评论0