div+css实现90年代的收音机效果代码-html代码-BFW代码库

代码语言：html

代码描述：div+css实现90年代的收音机效果代码

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

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

<head>

  <meta charset="UTF-8">
  

  
  
  
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap");

*,
*:before,
*:after {
	box-sizing: border-box;
}

:root {
	--montserrat-font: "Montserrat", sans-serif;
	--system-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
		Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
	--primary-background: #f5f5dc;
	--juke-box-primary-bg: #8f8c7f;
	--juke-box-border: #79776c;
	--small-font: 2;
	--med-font: 3;
	--large-font: 5;
	--border-small: 0.4;
	--border-med: 0.5;
	--border-large: 1;
	--juke-box-h: 30.5;
	--juke-box-w: 68;
	--speaker-small-w: 5;
	--speaker-small-h: 5;
	--speaker-large-w: 21.5;
	--speaker-large-h: 21.5;
	--speaker-lg-inner-w: 5;
	--speaker-lg-inner-h: 5;
	--juke-box-label-w: 16;
	--juke-box-label-h: 7;
	--box-top-h: 7.25;
	--top-inner-box-h: 4.75;
	--top-inner-box-w: 56;
	--hz-line-w: 0.3;
	--cube-w: 0.68;
	--cube-h: 0.68;
	--red-line-w: 0.3;
	--red-line-h: 4.1;
	--panel-line-w: 39;
	--panel-line-h: 0.4;
	--bar-h: 7;
	--bar-w: 1.75;
	--cross-bar-w: 54;
	--cross-bar-h: 2.25;
	--audio-btn-w: 3.5;
	--audio-btn-h: 1.35;
	--audio-cube-btn-w: 2.25;
	--audio-cube-btn-h: 1.75;
	--cassette-detail-s: 2;
	--light-box-w: 2.75;
	--light-box-h: 1.85;
	--detail-w: 10;
	--detail-h: 1;
	--volume-knob-h: 6.8;
	--volume-knob-w: 1.9;
}

body {
	margin: 0;
	padding: 0;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: var(--primary-background);
}

.juke-box {
	height: calc(var(--juke-box-h) * 1vmin);
	width: calc(var(--juke-box-w) * 1vmin);
	background: linear-gradient(
		to bottom,
		#b6b3a2 13%,
		var(--juke-box-primary-bg) 13%
	);
	background: linear-gradient(
		to bottom,
		#a8a597 13%,
		var(--juke-box-primary-bg) 13%
	);
	border-radius: 0.3rem;
	border: calc(var(--border-small) * 1vmin) solid var(--juke-box-border);
}

.speaker-small,
.speaker-small-two {
	position: fixed;
	height: calc(var(--speaker-small-h) * 1vmin);
	width: calc(var(--speaker-small-w) * 1vmin);
	background: hsl(0, 0%, 20%);
	border-radius: 50%;
	box-shadow: 0px 0px 0px calc(var(--border-med) * 1vmin) #ecf0f1;
}

.speaker-small {
	top: 5%;
	left: 2%;
}

.speaker-small-two {
	top: 5%;
	right: 2%;
}

.speaker-large,
.speaker-large-two {
	position: fixed;
	height: calc(var(--speaker-large-h) * 1vmin);
	width: calc(var(--speaker-large-w) * 1vmin);
	border-radius: 50%;
	top: 19%;
	background: hsl(0, 0%, 20%);
	box-shadow: 0 0 0 calc(var(--border-large) * 1vmin) #ecf0f1;
}

.speaker-large {
	left: 3%;
}

.speaker-large-two {
	right: 3%;
}

.speaker-large-inner,
.speaker-large-inner-two {
	position: fixed;
	width: calc(var(--speaker-lg-inner-w) * 1vmin);
	height: calc(var(--speaker-lg-inner-h) * 1vmin);
	top: 45%;
	border-radius: 50%;
	background: hsl(0, 0%, 20%);
	box-shadow: 0 0 0 calc(var(--border-med) * 1vmin) #555;
}

.speaker-large-inner {
	left: 15%;
}

.speaker-large-inner-two {
	right: 15%;
}

.jukebox-label {
	position: fixed;
	top: 68%;
	left: 38.3%;
	background: transparent;
	border-radius: 0.25rem;
	border: calc(var(--border-small) * 1vmin) solid var(--juke-box-border);
	width: calc(var(--juke-box-label-w) * 1vmin);
	height: calc(var(--juke-box-label-h) * 1vmin);
}

.jukebox-cassette-block {
	position: fixed;
	top: 20%;
	left: 38.3%;
	border-radius: 0.25rem;
	background: rgb(220, 220, 220);
	border: calc(var(--border-small) * 1vmin) solid var(--juke-box-border);
	width: calc(var(--juke-box-label-w) * 1vmin);
	height: calc(var(--juke-box-label-h) * 1.85 * 1vmin);
}

.jukebox-top-label {
	position: fixed;
	top: 7%;
	left: 38.3%;
	font-family: var(--system-font);
	font-family: var(--montserrat-font);
	line-height: 1;
	word-spacing: -4px;
	fon.........完整代码请登录后点击上方下载按钮下载查看