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

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

代码语言：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.........完整代码请登录后点击上方下载按钮下载查看