纯css实现泡泡上升动画效果
代码语言:html
所属分类:动画
代码描述:纯css实现泡泡上升动画效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { background: #1a1e23; margin: 0; } .bubbles { position: relative; width: 100%; height: 100vh; overflow: hidden; } .bubble { position: absolute; left: var(--bubble-left-offset); bottom: -75%; display: block; width: var(--bubble-radius); height: var(--bubble-radius); border-radius: 50%; animation: float-up var(--bubble-float-duration) var(--bubble-float-delay) ease-in infinite; } .bubble::before { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; background: rgba(136, 246, 251, 0.3); border-radius: inherit; animation: var(--bubble-sway-type) var(--bubble-sway-duration) var(--bubble-sway-delay) ease-in-out alternate infinite; } .bubble:nth-child(0) { --bubble-left-offset: 91vw; --bubble-radius: 7vw; --bubble-float-duration: 11s; --bubble-sway-duration: 5s; --bubble-float-delay: 3s; --bubble-sway-delay: 0s; --bubble-sway-type: sway-left-to-right; } .bubble:nth-child(1) { --bubble-left-offset: 68vw; --bubble-radius: 6vw; --bubble-float-duration: 11s; --bubble-sway-duration: 4s; --bubble-float-delay: 1s; --bubble-sway-delay: 2s; --bubble-sway-type: sway-right-to-left; } .bubble:nth-child(2) { --bubble-left-offset: 92vw; --bubble-radius: 9vw; --bubble-float-duration: 7s; --bubble-sway-duration: 5s; --bubble-float-delay: 3s; --bubble-sway-delay: 2s; --bubble-sway-type: sway-right-to-left; } .bubble:nth-child(3) { --bubble-left-offset: 7vw; --bubble-radius: 4vw; --bubble-float-duration: 10s; --bubble-sway-duration: 5s; --bubble-float-delay: 0s; --bubble-sway-delay: 2s; --bubble-sway-type: sway-right-to-left; } .bubble:nth-child(4) { --bubble-left-offset: 70vw; --bubble-radius: 2vw; --bubble-float-duration: 7s; --bubble-sway-duration: 5s; --bubble-float-delay: 3s; --bubble-sway-delay: 4s; --bubble-sway-type: sway-right-to-left; } .bubble:nth-child(5) { --bubble-left-offset: 87vw; --bubble-radius: 10vw; --bubble-float-duration: 11s; --bubble-sway-duration: 5s; --bubble-float-delay: 3s; --bubble-sway-delay: 1s; --bubble-sway-type: sway-right-to-left; } .bubble:nth-child(6) { --bubble-left-offset: 85vw; --bubble-radius: 10vw; --bubble-float-duration: 7s; --bubble-sway-duration: 4s; --bubble-float-delay: 1s; --bubble-sway-delay: 0s; --bubble-sway-type: sway-right-to-left; } .bubble:nth-child(7) { --bubble-left-offset: 70vw; --bubble-radius: 4vw; --bubble-float-duration: 7s; --bubble-sway-durat.........完整代码请登录后点击上方下载按钮下载查看
网友评论0