div+css布局实现立体凹凸音效按键点击按下效果代码
代码语言:html
所属分类:布局界面
代码描述:div+css布局实现立体凹凸音效按键点击按下效果代码
代码标签: div css 布局 立体 凹凸 音效 按键 点击 按下
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { margin: 0; min-height: 100vh; display: grid; place-items: center; background: #e2d5b4; background: radial-gradient(at 0% 0, #fffa, #fff0 50%), radial-gradient(at 100% 100%, #0002, #0000 50%), repeating-linear-gradient(transparent 0 13%, #ffffff08 0 calc(13% + 1px), transparent 0) 30% 0% / 40% 100%, repeating-linear-gradient(transparent 0 7%, #ffffff0a 0 calc(7% + 1px), transparent 0) 70% 0% / 33% 100%, repeating-linear-gradient(transparent 0 11%, #ffffff08 0 calc(11% + 1px), transparent 0) -10% 0% / 35% 100%, repeating-linear-gradient(transparent 0 17%, #ffffff11 0 calc(17% + 1px), transparent 0) 110% 0% / 27% 100%, repeating-linear-gradient(transparent 0 13%, #00000008 0 calc(13% + 1px), transparent 0) 60% -10% / 33% 100%, repeating-linear-gradient(transparent 0 8%, #00000008 0 calc(8% + 1px), transparent 0) 21% 2% / 27% 100%, repeating-linear-gradient(transparent 0 8%, #00000002 0 calc(8% + 1px), transparent 0) 31% 7% / 19% 100%, repeating-linear-gradient(transparent 0 13%, #00000004 0 calc(13% + 1px), transparent 0) 71% 15% / 19% 100%, linear-gradient(-45deg, #767a8088, #b8b8bb88), #c4c1c3; } fieldset { box-sizing: border-box; position: relative; border: 0; padding: 0; margin: 0; border-radius: 0.5em; box-shadow: inset 0 -0.1em 0.1em -0.05em #fff2, inset 0 0.125em 0.25em #0003, inset 0 0.25em 0.25em #0001, inset -0.05em -0.1em 0.15em #0003, inset 0 -0.05em 0.1em #0002, inset 0 0 0 0.4em #c4c1c3; gap: 0.5em; padding: 0.66em; background: linear-gradient(#000 0 0) 50% 50% / 97.5% 97.5% no-repeat; display: flex; font-size: 1.33rem; font-size: clamp(0.25rem, 2.5vmin, 2rem); & legend { position: absolute; width: 1px; height: 1px; overflow: hidden; left: -1000in; } & input { --spec: linear-gradient(#0000 0 0); --spec-checked: radial-gradient(50% 150% at 0 50%, #0004 6%, #0000 50%), radial-gradient(50% 130% at 100% 50%, #0004 10%, #0000 50%) ; --base: radial-gradient(at 20% 20%, #0000, #0003) 0 40% / 110% 120% padding-box, linear-gradient(#44444a, #28282f) 0 40% / 110% 120% padding-box, linear-gradient(#5b5b61, #28282f 50%, #202028) 0 40% / 110% 120% border-box; font-size: inherit; appearance: none; width: 4em; aspect-ratio: 4/3; border-radius: 0.15em; border: 0.02em solid #0000; background: red; margin: 0; padding: 0; position: relative; background: var(--spec), var(--base); color: #fff5; transform: perspective(30em) translateZ(3em); box-shadow: inset 0 0 0.4em #0002, 0 0 0.15em #0005, 0.25em 0.15em 0.4em #000c, 0.2em 0.25em 0.35em #0009; z-index: 2; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0