css+js实现三维立体收音机按键点击收听电台声音代码
代码语言:html
所属分类:多媒体
代码描述:css+js实现三维立体收音机按键点击收听电台声音代码,可切换5个不同的电台收音。
代码标签: css js 三维 立体 收音机 按键 点击 收听 电台 声音 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css?family=Special+Elite"); :root { --primary: #166496; --panel-color: hsl(0 0% 20%); --panel-color-lighten: hsl(0 0% 25%); --panel-color-darken: hsl(0 0% 15%); } body, html { width: 100%; height: 100%; display: grid; place-items: center; background: #161a20; color: white; font-family: "Special Elite", monospace; font-size: 18px; min-height: 100vh; perspective: 800px; transform-style: preserve-3d; } .front-panel { --depth: 20px; --depth-on: 5px; --X: -12.25deg; --Y: 0deg; background-color: var(--panel-color); border-radius: 8px; transform-style: preserve-3d; transform: rotateX(var(--X)) rotateY(var(--Y)) translateZ(100px); display: grid; place-items: center; grid-template-columns: 128px auto 128px; } .front-panel .display { width: 100%; grid-row: 1/2; background-color: var(--primary); text-align: center; } .front-panel .volume-knob { width: 80%; grid-row: 1/3; border-radius: 50%; aspect-ratio: 1; transform: translateZ(var(--depth-on)); transform-style: preserve-3d; background-color: var(--panel-color-lighten); } .radio-group { grid-row: 2/3; display: grid; grid-template-columns: repeat(5, 64px); gap: 4px; padding: 2px; background-color: black; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; transform-style: preserve-3d; } .radio-group .radio { background-color: var(--panel-color-lighten); position: relative; transition: all 0.3s cubic-bezier(0.42, -0.5, 0.58, 1.5); transform: translateZ(var(--depth)); transform-style: preserve-3d; } .radio-group .radio .top, .radio-group .radio .right, .radio-group .radio .left, .radio-group .radio .bottom { transition: all 0.2s ease-in-out; position: absolute; background-color: var(--panel-color); --grad-deg: 0deg; --l-color: var(--panel-color-lighten); background: linear-gradient(var(--grad-deg), var(--l-color) 0%, black 100%); } .radio-group .radio .top { right: 0; left: 0; bottom: 100%; height: var(--depth); transform-origin: bottom; transform: rotateX(90deg); } .radio-group .radio .right { width: 100%; left: 100%; top: 0; bottom: 0; width: var(--depth); transform-origin: left; transform: rotateY(90deg); --grad-deg: 90deg; } .radio-group .radio .left { width: 100%; right: 100%; top: 0; bottom: 0; width: var(--depth); transform-origin: right; transform: rotateY(-90deg); --grad-deg: -90deg; } .radio-group .radio .bottom { right: 0; left: 0; top: 100%; height: var(--depth); transform-origin: top; transform: rotateX(-90deg); --grad-deg: 180deg; } .radio-group .radio label { display: grid; place-items: center; padding: 8px; line-height: 1; cursor: pointer; } .radio-group .radio input[type=radio] { position: absolute; z-index: -1000; top: 200%; -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 0; height: 0; } .radio-group .radio:has(input[type=radio]:checked) { transform: translateZ(var(--depth-on)); background-color: var(--panel-color-darken); } .radio-group .radio:has(input[type=radio]:checked) .top, .radio-group .radio:has(input[type=radio]:checked) .bottom, .radio-group .radio:has(input[type=radio]:checked) .right, .radio-group .radio:has(input[type=radio]:checked) .left { --l-color: var(--panel-color-darken); } .radio-group .radio:has(input[type=radio]:checked) .top, .radio-group .radio:has(input[type=radio]:checked) .bottom { height: var(--depth-on); } .radio-group .radio:has(input[type=radio]:checked) .right, .radio-group .radio:has(input[type=radio]:checked) .left { width: var(--depth-on); } * { box-sizing: border-box; } .tools { top: 0; position: fixed; display: grid; max-width: 400px; width: 100%; padding: 1rem; border: 1px solid cyan; background-color: rgba(255, 255, 255, 0.1); z-index: 1000; } .tools input { width: 100%; } </style> </head> <body > <div class="too.........完整代码请登录后点击上方下载按钮下载查看
网友评论0