css冒泡泡动画底部效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：css冒泡泡动画底部效果代码

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

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />

    <style>
        *{margin:0;padding:0;list-style-type:none;}
    body {
      display: grid;
      grid-template-rows: 1fr auto;
      grid-template-areas: "main" "footer";
      overflow-x: hidden;
      background: #F5F7FA;
      min-height: 100vh;
      font-family: 'Open Sans', sans-serif;
    }
    body .footer {
      z-index: 1;
      --footer-background: #40b0f1;
      display: grid;
      position: relative;
      grid-area: footer;
      min-height: 12rem;
    }
    body .footer .bubbles {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 1rem;
      background: var(--footer-background);
      -webkit-filter: url("#blob");
              filter: url("#blob");
    }
    body .footer .bubbles .bubble {
      position: absolute;
      left: var(--position, 50%);
      background: var(--footer-background);
      border-radius: 100%;
      -webkit-animation: bubble-size var(--time, 4s) ease-in infinite var(--delay, 0s), bubble-move var(--time, 4s) ease-in infinite var(--delay, 0s);
              animation: bubble-size var(--time, 4s) ease-in infinite var(--delay, 0s), bubble-move var(--time, 4s) ease-in infinite var(--delay, 0s);
      -webkit-transform: translate(-50%, 100%);
              transform: translate(-50%, 100%);
    }
    body .footer .content {
      z-index: 2;
      display: grid;
      grid-template-columns: 1fr auto;
      grid-gap: 4rem;
      padding: 2rem;
      background: #40b0f1;
    }
    body .footer .content a, body .footer .content p {
      color: #F5F7FA;
      text-decoration: none;
    }
    body .footer .content b {
      color: white;
    }
    body .footer .content p {
      margin: 0;
      font-size: .75rem;
    }
    body .footer .content > div {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    body .footer .content > div > div {
      margin: 0.25rem 0;
    }
    body .footer .content > div > div > * {
      margin-right: .5rem;
    }
    body .footer .content > div .image {
      align-self: center;
      width: 4rem;
      height: 4rem;
      margin: 0.25rem 0;
      background-size: cover;
      background-position: center;
    }
    
    @-webkit-keyframes bubble-size {
      0%, 75% {
        width: var(--size, 4rem);
        height: var(--size, 4rem);
      }
      100% {
        width: 0rem;
        height: 0rem;
      }
    }
    
    @keyframes bubble-size {
      0%, 75% {
        width: var(--size, 4rem);
        height: var(--size, 4rem);
      }
      100% {
        width: 0rem;
        height: 0rem;
      }
    }
    @-webkit-keyframes bubble-move {
      0% {
        bottom: -4rem;
      }
      100% {
        bottom: var(--distance, 10rem);
      }
    }
    @keyframes bubble-move {
      0% {
        bottom: -4rem;
      }
      100% {
        bottom: var(--distance, 10rem);
      }
    }
    </style>
</head>

<body>
    <div class="footer">
        <div class="bubbles">
            <div class="bubble" style="--size:3.7213421480238473rem; --distance:9.505346460759434rem; --position:40.22788841130817%; --time:2.5579428080835602s; --delay:-2.551388062067941s;"></div>
            <div class="bubble" style="--size:5.500247300710568rem; --distance:6.2118813086522735rem; --position:87.07174911124845%; --time:3.7950243388260327s; --delay:-3.270237306503343s;"></div>
            <div class="bubble" style="--size:2.3242940429011956rem; --distance:7.044944494811669rem; --position:101.28750378546107%; --time:2.629329053292902s; --delay:-2.4302631916260564s;"></div>
            <div class="bubble" style="--size:5.368267979463531rem; --distance:6.984903032149823rem; --position:24.672901605467377%; --time:3.6922347100113684s; --delay:-2.7637748546263308s;"></div>
            <div class="bubble" style="--size:2.308292712367696rem; --distance:7.240308566969028rem; --position:-2.2618473747363588%; --time:2.7783399326076745s; --delay:-2.422323317653233s;"></div>
            <div class="bubble" style="--size:2.589049422686883rem; --distance:7.620168432414982rem; --position:57.960067264348396%; --time:3.1677481470068454s; --delay:-3.9895937435743383s;"></div>
            <div class="bubble" style="--size:4.012494033150956rem; --distance:7.215070310722501rem; --position:103.90156330955398%; --time:3.581799241298079s; --delay:-3.2842101855509367s;"></div>
            <div class="bubble" style="--size:5.486463553636168rem; --distance:8.178724244451335rem; --position:94.8496390776951%; --time:3.942288747270057s; --delay:-2.4935541596119926s;"></div>
            <div class="bubble" style="--size:2.5838969336339064rem; --distance:8.512391306969278rem; --position:0.42123986082513554%; --time:2.1258922491501977s; --delay:-3.333826864507246s;"></div>
            <div class="bubble" style="--size:5.079803260056025rem; --distance:6.388128560454028rem; --position:20.300017386843756%; --time:2.659418516406643s; --delay:-3..........完整代码请登录后点击上方下载按钮下载查看