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

代码语言:html

所属分类:布局界面

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

代码标签: 朝阳 鱼儿 游动 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 .........完整代码请登录后点击上方下载按钮下载查看

网友评论0