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;
	font-size: calc(var(--font-small) * 1vmin);
	text-align: center;
	border-radius: calc(var(--border-small) * 1vmin);
	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) / 2.3 * 1vmin);
}

.jukebox-cassette-holder {
	width: calc(var(--juke-box-label-w) / 1.15 * 1vmin);
	height: calc(var(--juke-box-label-h) * 1.3 * 1vmin);
	background: hsl(0, 0%, 20%);
	position: fixed;
	top: 25%;
	left: 39.95%;
	border: calc(var(--border-small) * 1vmin) solid var(--juke-box-border);
}

.top-box {
	width: calc(var(--juke-box-w) * 1vmin);
	height: calc(var(--box-top-h) * 1.075 * 1vmin);
	position: fixed;
	top: -22%;
	top: -24%;
	background: rgb(230, 230, 230);
	border-radius: calc(var(--border-small) * 1.5 * 1vmin);
	border: calc(var(--border-small) * 1vmin) solid var(--juke-box-border);
	filter: brightness(105%);
}

.top-inner-box {
	height: calc(var(--top-inner-box-h) * 1vmin);
	width: calc(var(--top-inner-box-w) * 1vmin);
	background: #333;
	position: fixed;
	top: -18.5%;
	left: 8.75%;
	border: calc(var(--border-small) / 1.1 * 1vmin) solid
		var(--juke-box-primary-bg);
	border-radius: calc(var(--border-small) * 1.5 * 1vmin);
	z-index: 999;
}

.hz-line,
.hz-line-two,
.hz-line-three,
.hz-line-four {
	position: fixed;
	height: calc(var(--hz-line-w) * 1vmin);
	width: calc(var(--juke-box-w) / 1.01 * 1vmin);
	background: hsl(0, 0%, 15%);
	background: var(--juke-box-border);
	z-index: 99;
	left: 0.5%;
}

.hz-line {
	top: -8%;
}

.hz-line-two {
	top: -10%;
}

.hz-line-three {
	top: -12%;
}

.hz-line-four {
	top: -14.4%;
}

.green-cube,
.green-cube-two,
.green-cube-three,
.green-cube-four,
.green-cube-five,
.green-cube-six,
.red-cube-seven,
.green-cube-eight,
.green-cube-nine,
.green-cube-ten,
.green-cube-eleven,
.green-cube-twelve,
.green-cube-thirteen,
.green-cube-fourteen,
.green-cube-fifteen,
.green-cube-sixteen,
.red-cube-seventeen,
.green-cube-eightteen,
.green-cube-nineteen,
.green-cube-twenty,
.green-cube-twenty-one,
.red-cube-twenty-two,
.green-cube-twenty-three,
.green-cube-twenty-four {
	background: #82e0aa;
	position: fixed;
	height: calc(var(--cube-h) * 1vmin);
	width: calc(var(--cube-w) * 1vmin);
	border-radius: calc(var(--border-small) / 2.5 * 1vmin);
	z-index: 999;
}

/* Row 1 */
.green-cube,
.green-cube-two,
.green-cube-three,
.green-cube-eight,
.green-cube-nine,
.green-cube-ten,
.green-cube-eleven,
.green-cube-twelve,
.green-cube-nineteen,
.green-cube-twenty-three {
	top: -7%;
}

.green-cube {
	left: 15.25%;
}

.green-cube-two {
	left: 16.5%;
}

.green-cube-three {
	left: 17.8%;
}

.green-cube-eight {
	left: 19.03%;
}

.green-cube-nine {
	left: 20.25%;
}

.green-cube-ten {
	left: 21.5%;
}

.green-cube-eleven {
	left: 22.9%;
}

.green-cube-twelve {
	left: 24.12%;
}

.green-cube-nineteen {
	left: 25.35%;
}

.green-cube-twenty-three {
	left: 26.75%;
}

/* Row 2 */

.green-cube-four,
.green-cube-five,
.green-cube-thirteen,
.green-cube-fourteen,
.green-cube-fifteen,
.green-cube-eightteen,
.green-cube-twenty-four {
	top: -9.79%;
}

.green-cube-four {
	left: 16.5%;
}

.green-cube-five {
	left: 17.8%;
}

.green-cube-thirteen {
	left: 25.35%;
}

.green-cube-fourteen {
	left: 20.25%;
}

.green-cube-fifteen {
	left: 21.5%;
}

.green-cube-eightteen {
	left: 22.9%;
}

.green-cube-twenty-four {
	left: 26.75%;
}

/* Row 3 */
.green-cube-six,
.green-cube-sixteen,
.green-cube-twenty,
.green-cube-twenty-one {
	top: -12.5%;
}
.green-cube-six {
	left: 17.8%;
}
.green-cube-sixteen {
	left: 20.25%;
}

.green-cube-twenty {
	left: 22.9%;
}

.green-cube-twenty-one {
	left: 25.35%;
}

/* Row 4 */
.red-cube-seven,
.red-cube-seventeen,
.red-cube-twenty-two {
	top: -15.21%;
	background: #e74c3c;
	background: #ec7063;
}

.red-cube-seven {
	left: 17.8%;
}

.red-cube-seventeen {
	left: 20.25%;
}

.red-cube-twenty-two {
	left: 25.35%;
}

.red-line {
	position: fixed;
	top: -17.5%;
	left: 69%;
	background: #ec7063;
	height: calc(var(--red-line-h) * 1vmin);
	width: calc(var(--red-line-w) * 1vmin);
	z-index: 1000;
}

.panel-hz-line {
	position: fixed;
	height: calc(var(--panel-line-h) * 1vmin);
	width: calc(var(--panel-line-w) * 1vmin);
	left: 31%;
	top: -11.5%;
	background: var(--juke-box-primary-bg);
	border-radius: calc(var(--border-small) * 1vmin);
	z-index: 999;
}

.cover-box {
	position: fixed;
	height: calc(var(--cross-bar-h) * 4 * 1vmin);
	width: calc(var(--cross-bar-w) * 1vmin);
	background: linear-gradient(
		to right,
		rgb(240, 240, 240) 6%,
		hsl(0, 0%, 25%) 6%,
		hsl(0, 0%, 25%) 94%,
		rgb(240, 240, 240) 6%
	);
	/*   background: rgb(240, 240, 240); */
	top: -51.5%;
	top: -53.5%;
	left: 10%;
	border: calc(var(--border-small) * 1vmin) solid var(--juke-box-border);
	border-bottom: 0;
	border-top-left-radius: calc(var(--border-small) * 2 * 1vmin);
	border-top-right-radius: calc(var(--border-small) * 2 * 1vmin);
	z-index: 99;
	filter: brightness(97%);
}

.hidden-box {
	position: fixed;
	height: calc(var(--cross-bar-h) * 3 * 1vmin);
	width: calc(var(--cross-bar-w) / 1.06 * 1vmin);
	background: var(--primary-background);
	top: -44%;
	top: -46.2%;
	left: 16.75%;
	left: 12.35%;
	border: calc(var(--border-small) * 1vmin) solid var(--juke-box-border);
	border-bottom: calc(var(--border-small) * 2 * 1vmin);
	border-top-right-radius: calc(var(--border-small) * 2 * 1vmin);
	border-top-left-radius: calc(var(--border-small) * 2 * 1vmin);
	z-index: 1000;
}

.audio-btn,
.audio-btn-two,
.audio-btn-three,
.audio-btn-four {
	position: fixed;
	background: hsl(0, 0%, 25%);
	width: calc(var(--audio-btn-w) * 1vmin);
	height: calc(var(--audio-btn-h) * 1vmin);
	border-top-right-radius: calc(var(--border-small) * 1vmin);
	border-top-left-radius: calc(var(--border-small) * 1vmin);
	top: -26.2%;
	top: -28.5%;
	z-index: 1100;
}

.audio-btn {
	left: 15.5%;
}

.audio-btn-two {
	left: 21.175%;
}

.audio-btn-three {
	left: 26.8%;
}

.audio-btn-four {
	right: 18%;
}

.audio-cube-btn,
.audio-cube-btn-two,
.audio-cube-btn-three,
.audio-cube-btn-four,
.audio-cube-btn-five,
.audio-cube-btn-six,
.audio-cube-btn-seven {
	position: fixed;
	top: -27.5%;
	top: -29.75%;
	width: calc(var(--audio-cube-btn-w) * 1vmin);
	height: calc(var(--audio-cube-btn-h) * 1vmin);
	background: hsl(0, 0%, 25%);
	border-top-right-radius: calc(var(--border-small) * 1vmin);
	border-top-left-radius: calc(var(--border-small) * 1vmin);
	z-index: 1100;
}

.audio-cube-btn {
	left: 40%;
}

.audio-cube-btn-two {
	left: 43.8%;
}

.audio-cube-btn-three {
	left: 47.65%;
}

.audio-cube-btn-four {
	left: 51.35%;
}

.audio-cube-btn-five {
	left: 55%;
}

.audio-cube-btn-six {
	left: 58.75%;
}

.audio-cube-btn-seven {
	left: 62.5%;
}

.cassette-detail,
.cassette-detail-two {
	position: fixed;
	background: hsl(0, 0%, 13%);
	height: calc(var(--cassette-detail-s) * 1vmin);
	width: calc(var(--cassette-detail-s) * 1vmin);
	border-radius: calc(var(--border-small) * 3 * 1vmin);
	top: 36%;
	z-index: 1000;
}

.cassette-detail {
	left: 44.05%;
}

.cassette-detail-two {
	left: 53%;
}

.light-box {
	position: fixed;
	top: 36.4%;
	left: 48%;
	background: var(--juke-box-primary-bg);
	opacity: 0.45;
	height: calc(var(--light-box-h) * 1vmin);
	width: calc(var(--light-box-w) * 1vmin);
	border-radius: calc(var(--border-small) * 1.1 * 1vmin);
	z-index: 1000;
}

.detail,
.detail-two,
.detail-three,
.detail-four,
.detail-five,
.detail-six,
.detail-seven {
	position: fixed;
	background: #9e9b8d;
	border-radius: calc(var(--border-small) / 1.8 * 1vmin);
	z-index: 1100;
}

.detail {
	top: 94.5%;
	left: 2%;
	height: calc(var(--detail-h) / 1.45 * 1vmin);
	width: calc(var(--detail-w) / 1.25 * 1vmin);
}

.detail-two {
	top: 85%;
	left: 49%;
	height: calc(var(--detail-h) / 1.3.........完整代码请登录后点击上方下载按钮下载查看