div+css实现蜜蜂在云层空中飞翔动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现蜜蜂在云层空中飞翔动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> :root { --bg-color: rgb(255, 212, 0); --line-color: rgb(0, 0, 0); --main-color: rgb(255, 244, 0); --main-color-dark: rgb(140, 70, 20); --wing-color: rgb(72, 209, 204); --unit: 1vh; } *:before, *:after { content: ""; position: absolute; } body { height: 100vh; margin: 0; display: grid; place-items: center; background-color: var(--bg-color); overflow: hidden; } .bee { position: absolute; left: 0; right: 0; margin: auto; top: calc(34 * var(--unit)); width: calc(30 * var(--unit)); height: calc(32 * var(--unit)); -webkit-animation: fly 2s infinite alternate ease-in-out; animation: fly 2s infinite alternate ease-in-out; z-index: 5; } .bee::before, .bee::after { bottom: 0; left: calc(10 * var(--unit)); width: calc(2.5 * var(--unit)); height: calc(5 * var(--unit)); background-color: transparent; border: calc(0.5 * var(--unit)) solid var(--line-color); -webkit-clip-path: inset(30% 0 0 50%); clip-path: inset(30% 0 0 50%); border-radius: 50%; z-index: 15; transform-origin: 100% 30%; -webkit-animation: swing 1s infinite alternate ease-in-out -0.25s; animation: swing 1s infinite alternate ease-in-out -0.25s; } .bee::after { bottom: calc(1 * var(--unit)); left: calc(18 * var(--unit)); width: calc(2 * var(--unit)); height: calc(4 * var(--unit)); -webkit-animation: swing 1s infinite alternate ease-in-out; animation: swing 1s infinite alternate ease-in-out; } .booty { position: absolute; bottom: calc(5 * var(--unit)); left: 0; width: calc(30 * var(--unit)); height: calc(20 * var(--unit)); background-color: var(--main-color); background-image: radial-gradient(circle at 75% 45%, var(--main-color) 42%, var(--main-color-dark) 51%, var(--main-color-dark) 54%, var(--main-color) 64%, var(--main-color) 66%, var(--main-color-dark) 74%, var(--main-color-dark) 77%, var(--main-color) 86%); border-radius: calc(12 * var(--unit)) calc(9 * var(--unit)) calc(9 * var(--unit)) calc(6 * var(--unit)); z-index: 1; } .booty::before, .booty::after { bottom: calc(-4 * var(--unit)); left: calc(5 * var(--unit)); width: calc(2 * var(--unit)); height: calc(4 * var(--unit)); background-color: transparent; border: calc(0.5 * var(--unit)) solid var(--line-color); -webkit-clip-path: inset(30% 0 0 50%); clip-path: inset(30% 0 0 50%); border-radius: 50%; z-index: 5; transform-origin: 100% 30%; -webkit-animation: swing 1s infinite alternate ease-in-out -0.5s; animation: swing 1s infinite alternate ease-in-out -0.5s; } .booty::after { bottom: calc(-3.5 * var(--unit)); left: calc(13 * var(--unit)); width: calc(1.5 * var(--unit)); height: calc(3 * var(--unit)); -webkit-animation: swing 1s infinite alternate ease-in-out -0.4s; animation: swing 1s infinite alternate ease-in-out -0.4s; } .wing-left, .wing-right { position: absolute; top: calc(-8 * var(--unit)); left: calc(9 * var(--unit)); width: calc(8 * var(--unit)); height: calc(16 * var(--unit)); background-color: var(--wing-color); z-index: 2; transform-origin: 75% 100%; transform: rotate(-15deg); border-radius: calc(8 * var(--unit)) calc(5 * var(--unit)) calc(2 * var(--unit)) calc(10 * var(--unit)); -webkit-animation: wing 0.075s infinite alternate ease-in-out; animation: wing 0.075s infinite alternate ease-in-out; } .wing-left { left: calc(16 * var(--unit)); z-index: 0; transform-origin: 25% 100%; transform: rotate(15deg); border-radius: calc(5 * var(--unit)) calc(8 * var(--unit)) calc(10 * var(--unit)) calc(2 * var(--unit)); -webkit-animation: wing-reverse 0.075s infinite alternate ease-in-out; animation: wing-reverse 0.075s infinite alternate ease-in-out; } .face { position: absolute; top: calc(8 * var(--unit)); right: 0; width: calc(12 * var(--unit)); height: calc(12 * var(--unit)); z-index: 2; -webkit-animation: swing 6s infinite alternate ease-in-out -0.5s; animation: swing 6s infinite alternate ease-in-out -0.5s; } .face::before, .face::after { top: calc(5 * var(--unit)); width: calc(6 * var(--unit)); height: calc(6 * var(--unit)); background-color: rgba(255, 20, 147, 0.1); background-image: radial-gradient(circle, rgba(255, 20, 147, 0.075) 25%, #fff000 75%); border-radius: 50%; } .face::before { left: 0; } .face::aft.........完整代码请登录后点击上方下载按钮下载查看
网友评论0