css布局实现鲸鱼跳跃和泡泡上浮动画效果代码-html代码-BFW代码库

css布局实现鲸鱼跳跃和泡泡上浮动画效果代码

代码语言：html

代码描述：css布局实现鲸鱼跳跃和泡泡上浮动画效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        @keyframes floating {
      to {
        transform: translate(-50%, -50%) translateY(30px);
      }
    }
    
    @keyframes bubbles {
      0% {
        transform: translateY(0);
      }
      100% {
        transform: translateY(-105vh);
      }
    }
    
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }
    
    html {
      width: 100%;
      height: 100%;
    }
    
    body {
      width: 100%;
      height: 100%;
      background-color: #2b7dfd;
    }
    
    /* ���� */
    .bubble-1 {
      width: 10px;
      height: 10px;
      border: 1px solid aliceblue;
      border-radius: 50%;
      position: absolute;
      bottom: 0px;
      left: 60%;
      animation: bubbles 15s linear infinite;
    }
    .bubble-2 {
      width: 25px;
      height: 25px;
      border: 1px solid aliceblue;
      border-radius: 50%;
      position: absolute;
      bottom: 0px;
      left: 10%;
      animation: bubbles 25s linear infinite;
    }
    .bubble-3 {
      width: 10px;
      height: 10px;
      border: 1px solid aliceblue;
      border-radius: 50%;
      position: absolute;
      bottom: 0px;
      left: 30%;
      animation: bubbles 15s linear infinite;
    }
    .bubble-4 {
      z-index: 2;
      width: 10px;
      height: 10px;
      border: 1px solid aliceblue;
      border-radius: 50%;
      position: absolute;
      bottom: 0px;
      left: 50%;
      animation: bubbles 10s linear infinite;
    }
    .bubble-5 {
      width: 15px;
      height: 15px;
      border: 1px solid aliceblue;
      border-radius: 50%;
.........完整代码请登录后点击上方下载按钮下载查看