css布局实现老式crt大屁股显示器电脑开机输入命令动画效果代码-html代码-BFW代码库

代码语言：html

代码描述：css布局实现老式crt大屁股显示器电脑开机输入命令动画效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
@font-face {
  font-family: "EnterCommand";
  src:
    url(https://manz.dev/assets/fonts/entercommand.woff2) format("woff2"),
    url(https://manz.dev/assets/fonts/entercommand.woff) format("woff");
}

:root {
  --monitor-light-color: #d3ccbc;
  --monitor-dark-color: #ccc5b3;
  --monitor-shadow-light: #d7d4c1;
  --monitor-shadow-medium: #b7b19b;
  --monitor-shadow-dark: #908e7a;
  --monitor-shadow-very-dark: #6e6d5f;
  --monitor-gradient:
    linear-gradient(
      to bottom,
      var(--monitor-light-color),
      var(--monitor-dark-color)
    );
  --monitor-shadow-texture:
    2px -2px 30px #493e2a33 inset,
    -2px -2px 30px #493e2a33 inset,
    1px -1px 1px #493e2a33 inset,
    -1px -1px 1px #493e2a33 inset,
    0 2px 30px #ddd inset;
}

body {
  background: #336;
}

.container {
  display: flex;
  justify-content: center;
  margin-top: 3em;
}

.computer-container {
  --width-monitor: 500px;
  --height-monitor: 450px;

  display: flex;
  flex-direction: column;
  align-items: center;
}

.computer-container .monitor {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    align-items: center;
    width: var(--width-monitor);
    height: var(--height-monitor);
    background: var(--monitor-gradient);
    border-radius: 5px;
    box-shadow: var(--monitor-shadow-texture);
  }

.computer-container .monitor .monitor-inner {
      width: calc(var(--width-monitor) * 0.75);
      height: calc(var(--height-monitor) * 0.7);
      border-radius: 5px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #000;
      border: 15px solid var(--monitor-shadow-medium);
      border-top: 15px solid var(--monitor-shadow-dark);
      border-bottom: 15px solid var(--monitor-shadow-light);
    }

.computer-container .monitor .monitor-inner .screen-container {
        width: calc(var(--width-monitor) * 0.72);
        height: calc(var(--height-monitor) * 0.68);
        background: #222;
        border-radius: 5px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        border: 3px solid #000;
        box-shadow:
          10px 10px 20px 14px #0008 inset,
          -10px -10px 20px 14px #0008 inset;
        position: relative;
      }

.computer-container .monitor .monitor-inner .screen-container .screen {
          width: 100%;
          max-width: calc(var(--width-monitor) * 0.72);
          font-family: "EnterCommand";
          font-size: 32px;
          color: #fff;
          text-shadow: 0 0 5px #ccc;
          padding: 10px 20px;
          box-sizing: border-box;
          position: absolute;
          top: 0;
          z-index: 5;
          transition: opacity 0.5s;
        }

.computer-container .monitor .monitor-inner .screen-container .screen.off {
            opacity: 0;
          }

.computer-container .monitor .monitor-inner .screen-container .eyes {
          width: 300px;
          height: 100px;
          display: flex;
          justify-content: space-around;
          align-items: center;
          transition: opacity 0.5s;
        }

.computer-container .monitor .monitor-inner .screen-container .eyes.off {
            opacity: 0;
          }

.computer-container .monitor .monitor-inner .screen-container .eyes .eye {
            width: 50px;
            height: 50px;
            background: #000;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            transform: translate(0, 25px);
            position: relative;
            overflow: hidden;
          }

.computer-container .monitor .monitor-inner .screen-container .eyes .eye::before {
              content: "";
              display: block;
              background: #333;
              width: 100%;
              height: 110%;
              position: absolute;
              top: 0;
              z-index: 5;
              -webkit-animation: blinkEye 2s ease infinite alternate;
                      animation: blinkEye 2s ease infinite alternate;
            }

.computer-container .monitor .monitor-inner .screen-container .eyes .eye::after {
              content: "";
              display: block;
              background: #333;
              width: 100%;
              height: 10%;
              position: absolute;
              bottom: 0;
              z-index: 5;
              transform: translate(0, 0);
            }

.computer-container .monitor .monitor-inner .screen-container .eyes .eye .shine {
              content: "";
              display: block;
              border-radius: 50%;
              width: 20px;
              height: 20px;
              background: #ccc;
              transform: translate(10px, -5px);
            }

.computer-container .monitor .monitor-bottom {
      width: 100%;
      height: 50px;
      position: absolute;
      bottom: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      transform: translate(150px, 0);
    }

.computer-container .monitor .monitor-bottom .power-switch {
        width: 38px;
        height: 38px;
        background: linear-gradient(to bottom, var(--monitor-shadow-dark), var(--monitor-shadow-light));
        border-radius: 50%;
        margin-right: 6px;
        display: flex;
        justify-content: center;
        align-items: center;
      }

.computer-container .monitor .monitor-bottom .power-switch .button {
          --symbol-color: #888;

          width: 24px;
          height: 24px;
          border: 2px solid #555;
          border-radius: 50%;
          background: #cac1b2;
          display: flex;
          justify-content: center;
          align-items: center;
        }

.computer-container .monitor .monitor-bottom .power-switch .button:active {
            --symbol-color: #666;

            box-shadow: 1px 1px 2px #0006 inset;
            background: var(--monitor-shadow-medium);
          }

.computer-container .monitor .monitor-bottom .power-switch .button::before {
            content: "";
            display: block;
            width: 10px;
            height: 10px;
            border: 3px solid var(--symbol-color);
            border-radius: 50%;
            -webkit-clip-path: polygon(15% 0, 0 0, 0 102%, 102% 100%, 102% 0, 85% 0, 50% 50%);
                    clip-path: polygon(15% 0, 0 0, 0 102%, 102% 100%, 102% 0, 85% 0, 50% 50%);
          }

.computer-container .monitor .monitor-bottom .power-switch .button::after {
            content: "";
            display: block;
            width: 4px;
            height: 10px;
            border-radius: 1px;
            border-left: 3px solid var(--symbol-color);
            position: absolute;
            transform: translate(2px, -4px);
          }

.computer-container .monitor .monitor-bottom .power-led {
        width: 9px;
        height: 9px;
        background: #333;
        border-radius: 50%;
        border: 1px solid var(--monitor-shadow-dark);
      }

.computer-container .monitor .monitor-bottom .power-led:not(.on) {
          box-shadow: 0 0 1px 1px #2228 inset;
          -webkit-animation: blink 2s infinite ease-out;
                  animat.........完整代码请登录后点击上方下载按钮下载查看