div+css实现带led显示屏收音机立体按键点击效果代码-html代码-BFW代码库

代码语言：html

代码描述：div+css实现带led显示屏收音机立体按键点击效果代码

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


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

<head>

  <meta charset="UTF-8">

  
  <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Rampart+One&amp;display=swap'>
  
<style>
@font-face {
	font-family: "Segment16C";
	src: url("//repo.bfw.wiki/bfwrepo/font/Segment16C-Bold-Italic.ttf")
		format("truetype");
}





* {
	transform-style: preserve-3d;
	box-sizing: border-box;
	font-family: "Segment16C", Arial, Helvetica, serif;
}

body {
	margin: 0;
	padding: 0;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	perspective: 60vmin;
	background: #333;
}

.content {
	width: 50vmin;
	height: 15vmin;
	background: linear-gradient(90deg, #fff0 19.25vmin, #333 0 19.75vmin, #fff0 0 30.25vmin, #333 0 30.75vmin, #fff0 0 100%), linear-gradient(90deg, #333 8.75vmin, #fff0 0 calc(100% - 8.75vmin), #333 0 100%), linear-gradient(0deg, #333 0 5.75vmin, #fff0 0 9.4vmin, #333 0 100%), linear-gradient(90deg, #fff0 0 1vmin, #0004 0 calc(100% - 1vmin), #fff0 0 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	padding-bottom: 0vmin;
	transform: rotateX(-10deg) rotateY(0deg) scale3d(1.5, 1.5, 1.5);
}

.content:before {
	content: "";
	position: absolute;
	width: calc(100% - 2vmin);
	height: calc(100% - 2vmin);
	background: #00000040;
	transform: translateZ(-1px);
	filter: blur(0.5vmin);
}

.cuboid {
	--height: 3;
	--width: 10;
	--depth: 10;
	--hue: 220;
	--sat: 20%;
	height: calc(var(--height) * 1vmin);
	width: calc(var(--width) * 1vmin);
	position: absolute;
	transition: all 0.1s ease 0s;
	cursor: pointer;
	margin-left: -22vmin;
	background: hsl(var(--hue), var(--sat), 60%);
}

.cuboid .side {
	position: absolute;
	top: 50%;
	left: 50%;
	height: 100%;
	width: 100%;
	border-radius: 2px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2vmin;
	text-shadow: 1px 0px 1px #fff4, 0px 0px 1px #000c;
	color: #5a6c91;
}


.cuboid .side:nth-of-type(1) {
	transform: translate3d(-50%, -50%, calc(var(--depth) * 0.5vmin));
	background: hsl(var(--hue), var(--sat), 60%);
}
.cuboid .side:nth-of-type(2) {
	transform: translate3d(-50%, -50%, calc(var(--depth) * -0.5vmin)) rotateY(180deg);
	background: hsl(var(--hue), var(--sat), 25%);
}
.cuboid .side:nth-of-type(3) {
	width: calc(var(--depth) * 1vmin);
	transform: translate(-50%, -50%) rotateY(90deg)	translate3d(0, 0, calc(var(--width) * 0.5vmin));
	background: hsl(var(--hue), var(--sat), 45%);
}
.cuboid .side:nth-of-type(4) {
	width: calc(var(--depth) * 1vmin);
	transform: translate(-50%, -50%) rotateY(-90deg) translate3d(0, 0, calc(var(--width) * 0.5vmin));
	background: hsl(var(--hue), var(--sat), 40%);
}
.cuboid .side:nth-of-type(5) {
	height: calc(var(--depth) * 1vmin);
	transform: translate(-50%, -50%) rotateX(90deg) translate3d(0, 0, calc(var(--height) * 0.5vmin));
	background: hsl(var(--hue), var(--sat), 65%);
}
.cuboid .side:nth-of-type(6) {
	height: calc(var(--depth) * 1vmin);
	transform: translate(-50%, -50%) rotateX(-90deg) translate3d(0, 0, calc(var(--height) * 0.5vmin));
	background: hsl(var(--hue), var(--sat), 20%);
}







.cuboid:nth-child(2) {
	margin-left: 0;
}
.cuboid:nth-child(3) {
	margin-left: 22vmin;
}


.cuboid:hover{
	transform: translateZ(-1vmin);
}


#am:checked ~ .content label[for=am],
#fm:checked ~ .content label[for=fm],
#aux:checked ~ .content label[for=aux] {
	transform: translateZ(-3vmin);
	transition: all 0.2s cubic-bezier(0, 0.24, 0.46, 2.31) 0s;
	--sat: 80%;
}







.cuboid .side:nth-of-type(1):before, .cuboid .side:nth-of-type(1):after {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	transform: translateZ(-1px);
	background: hsl(var(--hue), var(--sat), 60%);
}

.cuboid .side:nth-of-type(1):after {
	transform: rotateX(-190deg);
	background: #0004;
	transform-origin: center bottom;
	filter: blur(10px);
	height: 75%;
	top: 25%;
}



#am:checked ~ .content label[for="am"],
#fm:checked ~ .content label[for="fm"],
#aux:checked ~ .content label[for="aux"] {
	cursor: default;
}



#am:checked ~ .content label[for=am] .side,
#fm:checked ~ .content label[for=fm] .side,
#aux:checked ~ .content label[for=aux] .side {
	color: #ffffff;
	text-shadow: 1px 0px 1px #fff4, 0px 0px 1px #000c, 0px 0px 1px #ffffff, 0px 0px 5px #ffffff, 0px 0px 10px #ffffff, 0px 0px 20px #ffffff, 0px 0px 30px #ffffff;
}



#am:checked ~ .content label[for=am] .side:nth-of-type(1):after,
#fm:checked ~ .content label[for=fm] .side:nth-of-type(1):after,
#aux:checked ~ .content label[for=aux] .side:nth-of-type(1):after {
	background: hsl(var(--hue), var(--sat), 60%);
	filter: blur(15px);
	transform: translate3d(0, 0, -1px);
	box-shadow: 0 0 2vmin 1vmin hsl(var(--hue), var(--sat), 60%);
	height: 100%;
	top: 0;
}


input[type=radio] { display: none; }


.info.........完整代码请登录后点击上方下载按钮下载查看