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

代码语言：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%;
      position: absolute;
      bottom: 0px;
      left: 70%;
      animation: bubbles 15s linear infinite;
      z-index: 2;
    }
    .bubble-6 {
      width: 20px;
      height: 20px;
      border: 1px solid aliceblue;
      border-radius: 50%;
      position: absolute;
      bottom: 0px;
      left: 20%;
      animation: bubbles 30s linear infinite;
    }
    .bubble-7 {
      width: 25px;
      height: 25px;
      border: 1px solid aliceblue;
      border-radius: 50%;
      position: absolute;
      bottom: 0px;
      left: 35%;
      animation: bubbles 25s linear infinite;
    }
    .bubble-8 {
      width: 20px;
      height: 20px;
      border: 1px solid aliceblue;
      border-radius: 50%;
      position: absolute;
      bottom: 0px;
      left: 85%;
      animation: bubbles 15s linear infinite;
    }
    .bubble-9 {
      width: 20px;
      height: 20px;
      border: 1px solid aliceblue;
      border-radius: 50%;
      position: absolute;
      bottom: 0px;
      left: 40%;
      animation: bubbles 20s linear infinite;
    }
    .bubble-10 {
      width: 20px;
      height: 20px;
      border: 1px solid aliceblue;
      border-radius: 50%;
      position: absolute;
      bottom: 0px;
      left: 90%;
      animation: bubbles 25s linear infinite;
    }
    
    
    /*  ������ʽ */
    .container {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 500px;
      height: 500px;
      animation: floating 2s linear infinite alternate;
    }
    
    .polygon:nth-child(1) {
      position: absolute;
      top: 50px;
      left: 250px;
      background-color: #000000;
      width: 120px;
      height: 60px;
      clip-path: polygon(0 0, 100% 60%, 60% 100%, 0 60%);
    }
    .polygon:nth-child(2) {
      position: absolute;
      top: 86px;
      left: 298px;
      background-color: #242424;
      width: 120px;
      height: 60px;
      clip-path: polygon(50% 100%, 100% 100%, 60% 0%, 20% 40%);
    }
    .polygon:nth-child(3) {
      clip-path: polygon(30% 100%, 100% 100%, 72% 40%, 15% 0);
      position: absolute;
      top: 86px;
      left: 230px;
      background-color: white;
      width: 130px;
      height: 60px;
    }
    .polygon:nth-child(4) {
      clip-path: polygon(20% 100%, 60% 60%, 60% 0, 0 60%);
      position: absolute;
      top: 50px;
      left: 173px;
      background-color: #444444;
      width: 130px;
      height: 60px;
    }
    .polygon:nth-child(5) {
      clip-path: polygon(50% 0, 65% 100%, 10% 40%);
      position: absolute;
      top: 86px;
      left: 186px;
      background-color: #eeeeee;
      width: 130px;
      height: 60px;
    }
    .polygon:nth-child(6) {
      clip-path: polygon(0% 90%, 44% 0%, 64% 50%, 41% 100%);
      position: absolute;
      top: 85px;
      left: 116px;
      background-color: #242424;
      width: 130px;
      height: 50px;
    }
    .polygon:nth-child(7) {
      clip-path: polygon(56% 96%, 100% 40%, 55% 0);
      position: absolute;
      top: 54px;
      left: 44px;
      background-color: black;
      width: 130px;
      height: 78px;
    }
    .polygon:nth-child(8) {
      clip-path: polygon(95% 100%, 95% 50%, 30% 30%);
      position: absolute;
      top: -21.5px;
      left: -7px;
      background-color: #444444;
      width: 130px;
      height: 152px;
    }
    .polygon:nth-child(9) {
      clip-path: polygon(100% 45%, 29% 0, 0 30%);
      position.........完整代码请登录后点击上方下载按钮下载查看