立体表单项选择效果-html代码-BFW代码库

立体表单项选择效果

代码语言：html

代码描述：立体表单项选择效果

代码标签：效果

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Manjari:wght@400;700&amp;display=swap'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=VT323&amp;display=swap'>
<style>
* {
	border: 0;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
:root {
	--animDur: 0.3s;
	--transDur: 0.1s;
	--buttonTiming: linear;
	--checkboxTiming: linear;
	--radioTiming: linear;
	font-size: calc(16px + (24 - 16) * (100vw - 320px) / (1280 - 320));
}
body, button, input {
	font: 1em/1.5 "Manjari", sans-serif;
}
body, label {
	display: flex;
}
body {
	background-color: #f48d25;
	color: #17181c;
	height: 100vh;
}
form {
	background-color: #e3e4e8;
	background-image:
		linear-gradient(180deg,#0000,#0001),
		radial-gradient(0.5em 0.5em at 0.75em 0.75em,#fff 25%,#fff0 50%),
		radial-gradient(95% 0.75em at 50% 0.75em,#fff 25%,#fff0 50%);
	border-radius: 1.5em;
	box-shadow:
		0 0.5em 0.5em #fff4 inset,
		0 -0.25em 0.5em 0.25em #0007 inset,
		0 0.5em 1.5em #0007;
	margin: auto;
	max-width: 24.5em;
	padding: 1.5em;
	width: calc(100% - 3em);
}
button, h2, label {
	margin-bottom: 0.75em;
}
button, label {
	-webkit-tap-highlight-color: transparent;
}
button, .screen {
	margin-left: auto;
	margin-right: auto;
}
h1, h2, input + span {
	text-shadow: 0 0 0.25em #0004;
}
h1, .screen {
	font-size: 1.5em;
	line-height: 1;
}
h1 {
	margin-bottom: 0.75rem;
	padding-top: 0.75rem;
	text-align: center;
}
h2 {
	font-size: 1em;
}
label {
	align-items: center;
	flex-wrap: wrap;
	position: relative;
}
small {
	font-size: 0.75em;
	vertical-align: middle;
}
.form-columns {
	display: grid;
	grid-gap: 1.5em;
	grid-template-columns: repeat(auto-fit,minmax(10em,1fr));
	margin-bottom: 1.5em;
}
.screen {
	background-image: linear-gradient(180deg,#9aa38f,#8d9781);
	border-radius: 0.25rem;
	box-shadow:
		0 -0.25rem 0.25rem #0004,
		0 0.25rem 0.25rem #fff4,
		0 0.25rem 0.25rem #0007 inset;
	font-family: "VT323", monospace;
	margin-bottom: 2rem;
	padding: 0.5rem 0.75rem;
	max-width: 6.5rem;
}
.screen-value {
	display: inline-block;
	text-align: right;
	text-shadow: 0.1rem 0.1rem 0.1rem #0004;
	text-transform: uppercase;
	width: 100%;
}
.fade-in {
	animation: valueFadeIn 0.05s linear;
}
/* All */
button:focus, button span:focus, input:focus {
	outline: transparent;
}
input:focus + span {
	color: #db0b0b;
	text-shadow: 0 0 0.25em #db0b0b44;
}
button, input[type=checkbox], input[type=radio], label {
	cursor: pointer;
}
input[type=checkbox], input[type=checkbox]:befo.........完整代码请登录后点击上方下载按钮下载查看