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 .........完整代码请登录后点击上方下载按钮下载查看
网友评论0