div+css实现泡泡气泡上浮动画效果代码-html代码-BFW代码库

div+css实现泡泡气泡上浮动画效果代码

代码语言：html

所属分类：动画

代码描述：div+css实现泡泡气泡上浮动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>

* {
    margin: 0;
    padding: 0
}

html {
    font-size: 14px
}

body {
    width: 100vw;
    height: 100vh;
    font-family: 'Montserrat',sans-serif,Arial,'Microsoft Yahei';
    background-image: linear-gradient(to left bottom,#d87a00,#f46246,#fa557c,#e75eaf,#bc74d7,#9487eb,#6197f4,#00a3f3,#00afed,#00b9e0,#00c0cf,#2ac6bc);
    background-size: 200%;
    animation: bgAnimation 30s linear infinite
}

@keyframes bgAnimation {
    0% {
        background-position: 0 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0 50%
    }
}

.container {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden
}

.bubble {
    position: absolute;
    width: 40px;
    height: 40px;
    bottom: 0;
    opacity: .6;
    border-radius: 100%;
    animation: flying 12s ease-in-out infinite;
    background: radial-gradient(circle at 77% 30%,rgba(255,255,255,0.8) 5px,aqua 8%,rgba(255,255,255,0.8) 60%,aqua 100%);
    box-shadow: inset 0 0 4px #fff,inset 1px 0 4.6px #eaf5fc,inset 8.8px 0 6px #c2d8fe,inset -2px -6px 10px #fde9ea,inset 0 5px 14px #fde9ea,0 0 9px #fff
}

.bubble:nth-child(3n+1) {
    left: calc(90px * var(--i));
    width: calc(3.8px * var(--i));
    height: calc(3.8px * var(--i));
    animation-duration: calc(0.3s * var(--i))
}

.bubble:nth-child(3n+2) {
    left: calc(70px * var(--i));
    width: calc(4.6px * var(--i));
    height: calc(4.6px * var(--i));
    animation-duration: calc(0.5s * var(--i))
}

.bubble:nth-child(3n+3) {
    left: calc(30px * var(--i));
    width: calc(3px * var(--i));
    height: calc(3px * var(--i));
    animation-duration: calc(0.4s * var(--i))
}

@keyframes flying {
    0% {
        bottom: -50px;
        transform: translateX(0px)
.........完整代码请登录后点击上方下载按钮下载查看