css实现海平面朝阳鱼儿游动404效果代码-html代码-BFW代码库

代码语言：html

代码描述：css实现海平面朝阳鱼儿游动404效果代码

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

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

<head>
    <meta charset="UTF-8">
    <title></title>

    <style>
        @import url("https://fonts.googleapis.com/css?family=Libre+Franklin");
    body {
      margin: 0;
      min-height: 100vh;
      overflow: hidden;
      font-family: "Libre Franklin", sans-serif;
      font-size: 62.5%;
      background-image: linear-gradient(0deg, #e8f4f8, lightblue);
    }
    
    .error {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      white-space: nowrap;
      text-transform: uppercase;
      font-size: 2rem;
      font-weight: 900;
      color: #3f00ff;
      text-shadow: 10px 10px 50px #e6e6e6;
      opacity: 0.2;
      user-select: none;
    }
    .error span {
      display: block;
    }
    .error span:nth-child(2) {
      font-size: 10rem;
    }
    
    .sun {
      position: absolute;
      top: 4em;
      left: 4em;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background-image: radial-gradient(circle at 50%, #ffffff 50%, #f5de19);
      box-shadow: 0px 0px 40px #f5de19, inset 0px 0px 100px #f5de19;
      animation: sun 5s linear infinite;
    }
    
    .clouds {
      position: absolute;
      right: 0;
      bottom: 35vh;
      left: 0;
      opacity: 0.5;
    }
    .clouds div {
      position: relative;
      left: -30%;
      width: 220px;
      height: 80px;
      border-radius: 50%;
      background-color: #ffffff;
      background-image: radial-gradient(ellipse at 50%, transparent, #fcfcfc, #f7f7f7);
      filter: blur(3px);
      animation: clouds 60s linear infinite, cloud 8s linear infinite;
    }
    .clouds div::before, .clouds div::after {
      position: absolute;
      content: "";
      width: inherit;
      height: inherit;
      border-radius: 50%;
      background-color: #f2f2f2;
      background-image: radial-gradient(ellipse at 50%, transparent, #f2f2f2, #f7f7f7);
      filter: blur(3px);
      animation: cloud 3s linear infinite;
    }
    .clouds div::after {
      background-color: #e6e6e6;
    }
    .clouds div:nth-child(2) {
      animation-delay: 5s;
    }
    .clouds div:nth-child(3) {
      animation-duration: 40s;
    }
    
    .birds {
      position: absolute;
      right: -10%;
      top: 30px;
      width: 10px;
      height: 10px;
      background-color: #070000;
      clip-path: polygon(70% 59%, 100% 54%, 64% 68%, 48% 83%, 81% 86%, 55% 90%, 0 92%, 19% 76%, 0 60%, 33% 71%);
      animation: birds 30s linear infinite, fly 1s linear infinite;
    }
    
    .sea {
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: -1;
      height: 25vh;
      background-color: lightblue;
    }
    
    .fish {
      position: relative;
    }
    .fish span {
      position: relative;
      top: 10%;
      left: 110%;
      display: block;
      width: 50px;
      height: 16px;
      background-color: #3a9fc0;
      background-image: linear-gradient(to top, #92cbde, #3a9fc0);
      border-radius: 52% 48% 51% 49% / 51% 56% 44% 49%;
      animation: fish 15s linear infinite;
    }
    .fish span::before, .fish span::after {
      position: absolute;
      content: "";
    }
    .fish span::before {
      left: 95%;
      top: calc(50% - 8px);
      width: 16px;
      height: 16px;
      background-color: inherit;
      background-image: linear-gradient(90deg, #3a9fc0, #2b758d);
      clip-path: polygon(100% 0%, 84% 49%, 100% 100%, 0 66%, 0% 50%, 0 35%);
    }
    .fish span::after {
      width: 10px;
      height: 10px;
      top: 50%;
      left: 30%;
      background-image: linear-gradient(135deg, #3a9fc0, #2b758d);
      clip-path: polygon(100% 27%, 86% 74%, 31% 100%, 0 22%, 0 0, 35% 0);
      transform-origin: 0 0;
      animation: side 0.5s linear infinite;
    }
    .fish span:nth-child(2) {
      animation-duration: 6s;
      animation-delay: 5s;
    }
    .fish span:nth-child(3) {
      animation-duration: 9s;
    }
    
    .wave {
      position: absolute;
      left: -25%;
      bottom: 0;
      width: 150%;
      height: 100%;
      background-color: lightblue;
      animation: vawe 20s linear infinite;
    }
    .wave.w-1 {
      background: #99cfe0;
      animation-delay: 2s;
    }
    .wave.w-2 {
      background: #86c5da;
    }
    
    .bottom {
      position: absolute;
      right: -2em;
      bottom: 0;
      left: -2em;
      height: 1.35em;
      border-radius: 78% 22% 52% 48% / 100% 100% 0% 0%;
      background-color: #3a0003;
      background-image: linear-gradient(0deg, #210001, #6d0005);
      opacity: 0.8;
    }
    
    .grass {
      position: absolute;
      bottom: 5px;
      left: 5em;
      width: 3px;
      height: 35px;
      background-color: #44882d;
      background-image: linear-gradient(45deg, #44882d, #274f1a);
      border-radius: 40%;
      transform-origin: 50% 100%;
      animation: grass 2s linear infinite;
    }
    .grass:nth-child(2) {
      bottom: 3px;
      left: 30%;
    }
    .grass:nth-child(3) {
      bottom: 8px;
      left: 60%;
    }
    .grass:nth-child(4) {
      bottom: 6px;
      left: 80%;
    }
    .grass span {
      position: absolute;
      left: -5px;
      width: 8px;
      height: 2px;
      background-color: #44882d;
      background-image: inherit;
      transform: rotate(45deg);
    }
    .grass span::before {
      position: absolute;
      top: 4px;
      left: 4px;
      content: "";
      width: inherit;
      height: inherit;
      background-color: inherit;
      transform: rotate(-90deg) translateX(100%);
    }
    .grass span:nth-child(2) {
      top: 10px;
    }
    .grass span:nth-child(3) {
      top: 15px;
    }
    .grass span:nth-child(3) {
      top: 20px;
    }
    
    .circle {
      position: absolute;
      bottom: 5px;
      left: 0;
      .........完整代码请登录后点击上方下载按钮下载查看