纯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-duration: 4s; --bubble-float-delay: 3s; --bubble-sway-delay: 1s; --bubble-sway-type: sway-left-to-right; } .bubble:nth-child(8) { --bubble-left-offset: 43vw; --bubble-radius: 5vw; --bubble-float-duration: 6s; --bubble-sway-duration: 4s; --bubble-float-delay: 0s; --bubble-sway-delay: 0s; --bubble-sway-type: sway-left-to-right; } .bubble:nth-child(9) { --bubble-left-offset: 58vw; --bubble-radius: 8vw; --bubble-float-duration: 8s; --bubble-sway-duration: 4s; --bubble-float-delay: 4s; --bubble-sway-delay: 3s; --bubble-sway-type: sway-right-to-left; } .bubble:nth-child(10) { --bubble-left-offset: 57vw; --bubble-radius: 5vw; --bubble-float-duration: 7s; --bubble-sway-duration: 5s; --bubble-float-delay: 2s; --bubble-sway-delay: 0s; --bubble-sway-type: sway-right-to-left; } .bubble:nth-child(11) { --bubble-left-offset: 41vw; --bubble-radius: 3vw; --bubble-float-duration: 7s; --bubble-sway-duration: 6s; --bubble-float-delay: 1s; --bubble-sway-delay: 2s; --bubble-sway-type: sway-left-to-right; } .bubble:nth-child(12) { --bubble-left-offset: 59vw; --bubble-radius: 3vw; --bubble-float-duration: 11s; --bubble-sway-duration: 6s; --bubble-float-delay: 4s; --bubble-sway-delay: 1s; --bubble-sway-type: sway-left-to-right; } .bubble:nth-child(13) { --bubble-left-offset: 78vw; --bubble-radius: 6vw; --bubble-float-duration: 7s; --bubble-sway-duration: 6s; --bubble-float-delay: 3s; --bubble-sway-delay: 4s; --bubble-sway-type: sway-left-to-right; } .bubble:nth-child(14) { --bubble-left-offset: 39vw; --bubble-radius: 9vw; --bubble-float-duration: 7s; --bubble-sway-duration: 4s; --bubble-float-delay: 0s; --bubble-sway-delay: 1s; --bubble-sway-type: sway-right-to-left; } .bubble:nth-child(15) { --bubble-left-offset: 38vw; --bubble-radius: 3vw; --bubble-float-duration: 11s; --bubble-sway-duration: 6s; --bubble-float-delay: 3s; --bubble-sway-delay: 4s; --bubble-sway-type: sway-left-to-right; } .bubble:nth-child(16) { --bubble-left-offset: 91vw; --bubble-radius: 9vw; --bubble-float-duration: 9s; --bubble-sway-duration: 6s; --bubble-float-delay: 3s; --bubble-sway-delay: 0s; --bubble-sway-type: sway-right-to-left; } .bubble:nth-child(17) { --bubble-left-offset: 56vw; --bubble-radius: 4vw; --bubble-float-duration: 12s; --bubble-sway-duration: 6s; --bubble-float-delay: 3s; --bubble-sway-delay: 0s; --bubble-sway-type: sway-right-to-left; } .bubble:nth-child(18) { --bubble-left-offset: 92vw; --bubble-radius: 8vw; --bubble-float-duration: 10s; --bubble-sway-duration: 6s; --bubble-float-delay: 3s; --bubble-sway-delay: 1s; --bubble-sway-type: sway-left-to-right; } .bubble:nth-child(19) { --bubble-left-offset: 0vw; --bubble-radius: 3vw; --bubble-float-duration: 12s; --bubble-sway-duration: 6s; --bubble-float-delay: 1s; --bubble-sway-delay: 2s; --bubble-sway-type: sway-right-to-left; } .bubble:nth-child(20) { --bubble-left-offset: 12vw; --bubble-radius: 7vw; --bubble-float-duration: 8s; --bubble-sway-duration: 6s; --bubble-float-delay: 2s; --bubble-sway-delay: 2s; --bubble-sway-type: sway-right-to-left; } .bubble:nth-child(21) { --bubble-left-offset: 78vw; --bubble-radius: 6vw; --bubble-float-duration: 11s; --bubble-sway-duration: 4s; --bubble-float-delay: 4s; --bubble-sway-delay: 2s; --bubble-sway-type: sway-right-to-left; } .bubble:nth-child(22) { --bubble-left-offset: 12vw; --bubble-radius: 3vw; --bubble-float-duration: 12s; --bubble-sway-duration: 6s; --bubble-float-delay: 1s; --bubble-sway-delay: 1s; --bubble-sway-type: sway-left-to-right; } .bubble:nth-child(23) { --bubble-left-offset: 62vw; --bubble-radius: 2vw; --bubble-float-duration: 11s; --bubble-sway-duration: 5s; --bubble-float-delay: 3s; --bubble-sway-delay: 0s; --bubble-sway-type: sway-right-to-left; } .bubble:nth-child(24) { --bubble-left-offset: 12vw; --bubble-radius: 5vw; --bubble-float-duration: 10s; --bubble-sway-duration: 6s; --bubble-float-delay: 2s; --bubble-sway-delay: 2s; --bubble-sway-type: sway-left-to-right; } .bubble:nth-child(25) { --bubble-left-offset: 55vw; --bubble-radius: 3vw; --bubble-float-duration: 12s; --bubble-sway-duration: 5s; --bubble-float-delay: 0s; --bubble-sway-delay: 4s; --bubble-sway-type: sway-left-to-right; } .bubble:nth-child(26) { --bubble-left-offset: 84vw; --bubble-radius: 2vw; --bubble-float-duration: 9s; --bubble-sway-duration: 4s; --bubble-float-delay: 2s; --bubble-sway-delay: 2s; --bubble-sway-type: sway-left-to-right; } .bubble:nth-child(27) { --bubble-left-offset: 0vw; --bubble-radius: 3vw; --bubble-float-duration: 10s; --bubble-sway-duration: 6s; --bubble-float-delay: 4s; --bubble-sway-delay: 4s; --bubble-sway-type: sway-right-to-left; } .bubble:nth-child(28) { --bubble-left-offset: 59vw; --bubble-radius: 6vw; --bubble-float-duration: 8s; --bubble-sway-duration: 4s; --bubble-float-delay: 1s; --bubble-sway-delay: 4s; --bubble-sway-type: sway-left-to-right; } .bubble:nth-child(29) { --bubble-left-offset: 34vw; --bubble-radius: 2vw; --bubble-float-duration: 6s; --bubble-sway-duration: 6s; --bubble-float-delay: 4s; --bubble-sway-de.........完整代码请登录后点击上方下载按钮下载查看
网友评论0