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