css布局实现老式无线电收音机带屏显代码-html代码-BFW代码库

css布局实现老式无线电收音机带屏显代码

代码语言：html

代码描述：css布局实现老式无线电收音机带屏显代码

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

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

<head>
  <meta charset="UTF-8">
  
  <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&display=swap" rel="stylesheet">
  
  
  
<style>
/*-----------------------------
Approach inspo - https://css-tricks.com/advice-for-complex-css-illustrations/
-----------------------------*/

:root {
  --size: 180;
  --unit: calc((var(--size) / 1000) * 1vmin);
  --w: 1000;
  --h: 514;

  /* Colors */
  --color-text: #d4fdff;
  --color-screen: #00203a;
  --color-reflection: #085e8a;
  --color-monitor-frame: #06284e;
  --color-monitor-frame-dark: #104267;
  --color-monitor-outer: #e1ddd2;
  --color-monitor-bevel: #fefefe;
  --color-monitor-shadow: #afa488;
  --color-text-glow: #24e4f2;
  --color-input-text: #9fbde0;
  --color-input-border: #464448;
  --color-base: #a49475;
  --color-base-light: #b0a589;
  --color-base-lighter: #d2cab7;
  --color-base-lightest: #e7ddda;
}

/* Responsive sizing */
@media (max-width: 1000px) {
  :root {
    --size: 90;
  }
}

/*-----------------------------
Scene
-----------------------------*/

body {
  margin: 0;
  padding: 0;
}

.background {
  background: linear-gradient(
      180deg,
      transparent 0%,
      transparent 60%,
      white 60%,
      white 80%,
      #cfc7c7
    );  
  overflow: hidden;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.scene-container {
  position: relative;
  width: calc(var(--w) * var(--unit));
  height: calc(var(--h) * var(--unit));
}

.scene {
  position: absolute;
  z-index: 10;
  width: 100%;
  height: 100%;
}

.scene *,
.scene *:after,
.scene *:before {
  box-sizing: border-box;
  position: absolute;
}

.scene-container img {
  opacity: 0;
}

/*-----------------------------
Monitor
-----------------------------*/

.monitor__frame {
  width: calc(561 * var(--unit));
  height: calc(276 * var(--unit));
  top: calc(78 * var(--unit));
  left: calc(210 * var(--unit));
  border-top-left-radius: calc(13 * var(--unit)) calc(50 * var(--unit));
  background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.1),
      transparent 4%,
      transparent 96%,
      rgba(255, 255, 255, 0.2)
    ),
    linear-gradient(
      180deg,
      var(--color-monitor-frame) 80%,
      var(--color-monitor-frame-dark)
    );
  border-bottom-left-radius: calc(12 * var(--unit)) calc(50 * var(--unit));
  opacity: 1;
  border-top-right-radius: calc(13 * var(--unit)) calc(50 * var(--unit));
  border-bottom-right-radius: calc(13 * var(--unit)) calc(50 * var(--unit));
}

.monitor__frame-border {
  width: calc(595 * var(--unit));
  height: calc(313 .........完整代码请登录后点击上方下载按钮下载查看