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:.........完整代码请登录后点击上方下载按钮下载查看
网友评论0