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