Skeuomorph UI套件

下载代码

html

css

分享到微信朋友圈

html

<body class="theme theme_font_neoskeuo theme_space_neoskeuo theme_color_neoskeuo">
	
<section class="decorator decorator_indent-b_3xl">
	<h2 class="decorator decorator_indent-b_l">Button</h2>
	<button class="button">
		Click me, babe!
	</button>
</section>

<section class="decorator decorator_indent-b_3xl">
	<h2 class="decorator decorator_indent-b_l">Input</h2>
	<input type="text" class="input decorator decorator_indent-b_xl" placeholder="Place ur text here" />
	<input type="number" inputmode="numeric" class="input decorator decorator_indent-b_xl" placeholder="000000" />
	
	<div class="decorator decorator_distribute_left">
		<input type="text" class="input input_form_default-brick" placeholder="Ur text" />
		<input type="text" class="input input_form_brick-brick" placeholder="Ur text" />
		<input type="number" inputmode="numeric" class="input input_form_brick-default" placeholder="000000" />
	</div>
</section>

<section class="decorator decorator_indent-b_3xl">
	<h2 class="decorator decorator_indent-b_l">Choice Group</h2>
	<div class="choice-group decorator_indent-r_xl">
		<label for="CG-radio-1" class="choice-group__item">
			<input type="radio" id="CG-radio-1" name="choice-group" class="choice-group__input">
			<div type="button" class="choice-group__button">1 choice</div>
		</label>
		<label for="CG-radio-2" class="choice-group__item">
			<input checked type="radio" id="CG-radio-2" name="choice-group" class="choice-group__input">
			<div type="button" class="choice-group__button">2 choice</div>
		</label>
		<label for="CG-radio-3" class="choice-group__item">
			<input type="radio" id="CG-radio-3" name="choice-group" class="choice-group__input">
			<div type="button" class="choice-group__button">3 choice</div>
		</label>
	</div>
	
	<div class="choice-group">
		<label tabindex="-1" class="choice-group__item">
			<input type="checkbox" class="choice-group__input">
			<div type="button" class="choice-group__button" tabindex="-1">1 choice</div>
		</label>
		<label tabindex="-1" class="choice-group__item">
			<input checked type="checkbox" class="choice-group__input">
			<div type="button" class="choice-group__button" tabindex="-1">2 choice</div>
		</label>
		<label tabindex="-1" class="choice-group__item">
			<input checked type="checkbox" class="choice-group__input">
			<div type="button" class="choice-group__button" tabindex="-1">3 choice</div>
		</label>
	</div>
</section>
	
<section class="decorator decorator_indent-b_3xl">
	<h2 class="decorator decorator_indent-b_l">Checkbox</h2>
	<label class="checkbox">
		<input type="checkbox" class="checkbox__input">
		<div class="checkbox__box"></div>
		<span class="checkbox__text">Check me, baby!</span>
	</label>
	<label class="checkbox decorator decorator_indent-l_4xl">
		<input checked type="checkbox" class="checkbox__input">
		<div class="checkbox__box"></div>
		<span class="checkbox__text">Check me, baby!</span>
	</label>
	
</section>
	
<section class="decorator decorator_indent-b_3xl">
	<h2 class="decorator decorator_indent-b_l">Radio</h2>
	<label class="radio">
		<input type="radio" name="test" class="radio__input">
		<div class="radio__box"></div>
		<span class="radio__text">Check me, baby!</span>
	</label>
	<label class="radio decorator decorator_indent-l_4xl">
		<input checked type="radio" name="test" class="radio__input">
		<div class="radio__box"></div>
		<span class="radio__text">Check me, baby!</span>
	</label>
</section>
	
<section class="decorator decorator_indent-b_3xl">
	<h2 class="decorator decorator_indent-b_l">Switch</h2>
	<label class="switch" for="switch_1">
		<input id="switch_1" type="checkbox" class="switch__input">
		<div class="switch__box"></div>
		<span aria-hidden="true">Click me</span>
	</label>
</section>
	
<section class="decorator decorator_indent-b_3xl">
	<h2 class="decorator decorator_indent-b_l">Select</h2>
	<select class="select">
		<option>Option 1</option>
    <option>Option 2</option>
    <option>Looooong option 3</option>
	</select>
</section>
	
<section class="decorator decorator_indent-b_3xl">
	<h2 class="decorator decorator_indent-b_l">Tabs</h2>
	
</section>

</body>

css

body { 
	padding: 40px;
	background-color: var(--color-bg-default); 
}

h2 { 
	font-size: 28px; 
	font-weight: bold;
	margin: 3em 0 2em;
}

.theme_space_neoskeuo {
	--space-3xs: 2px;
	--space-2xs: 4px;
	--space-xs: 8px;
	--space-s: 12px;
	--space-m: 16px;
	--space-l: 20px;
	--space-xl: 24px;
	--space-2xl: 32px;
	--space-3xl: 40px;
	--space-4xl: 48px;
	--space-5xl: 72px;
	--space-6xl: 96px;
}

.theme { 
	--radius-default: 16px;
	--radius-s: 12px;
	--radius-xs: 6px;
}

.theme_font_neoskeuo {
	--font-primary: 'Montserrat', 'Helvetica', 'Helvetica Neue', 'Segoe UI', 'Arial', sans-serif;
	--font-digital: 'Digital', monospace;
	
	font-family: var(--font-primary);
}

.theme_color_neoskeuo {
	
	--color-bg-default: rgba(238,240,245,1);
	
	--color-typo-primary: rgba(48,52,84, 1);
	--color-typo-link: rgba(0, 80, 220, 1);
	
	--color-control-bg-default: rgba(240,242,247,1);
	--color-control-bg-action: hsla(220, 100%, 54%, 1);
	
	--color-shadow: 12,13,18;
	--color-light: 255, 255, 255;
	--color-glow: 0,150,255;
}

.button {
	display: inline-block;
	-webkit-appearance: none;
	-moz-appearance: none;
	     appearance: none;
	padding: var(--space-xl) var(--space-4xl);
	font-size: 18px;
	font-family: var(--font-primary);
	color: var(--color-typo-primary);
	border: none;
	border-radius: var(--radius-default);
	background-color: var(--color-bg-default);
	cursor: pointer;
	outline: none;
	text-shadow: 
		0 -1px 0 rgba( var(--color-shadow), 0.08 ),
		0 1px 0 rgba( var(--color-light), 1 );
	box-shadow: 
		inset 1px 1px 1px rgba( var(--color-light), 1 ),
		-2px -2px 2px rgba( var(--color-light), 0.9),
		-4px -4px 6px rgba( var(--color-light), 0.9),
		-8px -8px 16px rgba( var(--color-light), 0.9),
		-12px -12px 24px rgba( var(--color-light), 0.9),
		inset -1px -1px 1px rgba( var(--color-shadow), 0.06 ),
		2px 2px 2px rgba( var(--color-shadow), 0.08),
		4px 4px 6px rgba( var(--color-shadow), 0.08),
		8px 8px 16px rgba( var(--color-shadow), 0.08),
		12px 12px 24px rgba( var(--color-shadow), 0.08);
	-webkit-transition: 
		color 0.3s,
		text-shadow 0.3s,
		box-shadow 0.6s;
	transition: 
		color 0.3s,
		text-shadow 0.3s,
		box-shadow 0.6s;
/* 	&:active {
		box-shadow: 
			inset -1px -1px 1px rgba( var(--color-light), 1 ),
			3px 3px 3px rgba( var(--color-light), 1),
			5px 5px 6px rgba( var(--color-light), 1),
			10px 10px 16px rgba( var(--color-light), 1),
			14px 14px 24px rgba( var(--color-light), 1),
			inset 1px 1px 1px rgba( var(--color-shadow), 0.06 ),
			-3px -3px 3px rgba( var(--color-shadow), 0.085),
			-5px -5px 6px rgba( var(--color-shadow), 0.085),
			-10px -10px 16px rgba( var(--color-shadow), 0.085),
			-14px -14px 24px rgba( var(--color-shadow), 0.085);
	} */
}

.button:hover {
		color: var(--color-typo-link);
		text-shadow: 
			0 -1px 0 rgba( var(--color-shadow), 0.08 ),
			0 1px 0 rgba( var(--color-light), 1 ),
			0 0 1px rgba( var(--color-light), 0.7 ),
			0 0 4px rgba( var(--color-glow), 0.08 ),
			0 0 8px rgba( var(--color-glow), 0.08 );
		box-shadow: 
			inset 1px 1px 1px rgba( var(--color-light), 1 ),
			-3px -3px 3px rgba( var(--color-light), 1),
			-5px -5px 6px rgba( var(--color-light), 1),
			-10px -10px 16px rgba( var(--color-light), 1),
			-14px -14px 24px rgba( var(--color-light), 1),
			inset -1px -1px 1px rgba( var(--color-shadow), 0.06 ),
			3px 3px 3px rgba( var(--color-shadow), 0.085),
			5px 5px 6px rgba( var(--color-shadow), 0.085),
			10px 10px 16px rgba( var(--color-shadow), 0.085),
			14px 14px 24px rgba( var(--color-shadow), 0.085);
	}

/* 	&:active {
		box-shadow: 
			inset 1px 1px 1px rgba( var(--color-light), 1 ),
			inset 0px 0px 0 6px var(--color-bg-default),
			inset -5px -5px 6px 6px rgba( var(--color-light), 1 ),
			-3px -3px 3px rgba( var(--color-light), 1),
			-5px -5px 6px rgba( var(--color-light), 1),
			-10px -10px 16px rgba( var(--color-light), 1),
			-14px -14px 24px rgba( var(--color-light), 1),
			inset -1px -1px 1px rgba( var(--color-shadow), 0.06 ),
			inset 3px 3px 3px 6px rgba( var(--color-shadow), 0.085 ),
			inset 5px 5px 6px 6px rgba( var(--color-shadow), 0.085 ),
			3px 3px 3px rgba( var(--color-shadow), 0.085),
			5px 5px 6px rgba( var(--color-shadow), 0.085),
			10px 10px 16px rgba( var(--color-shadow), 0.085),
			14px 14px 24px rgba( var(--color-shadow), 0.085);
	} */

.button:active {
		box-shadow: 
			1px 1px 1px rgba( var(--color-light), 1 ),
			inset -2px -2px 2px rgba( var(--color-light), 0.9),
			inset -3px -3px 4px rgba( var(--color-light), 0.9),
			inset -6px -6px 12px rgba( var(--color-light), 0.9),
			inset -8px -8px 16px rgba( var(--color-light), 0.9),
			-1px -1px 1px rgba( var(--color-shadow), 0.06 ),
			inset 2px 2px 2px rgba( var(--color-shadow), 0.08),
			inset 3px 3px 4px rgba( var(--color-shadow), 0.08),
			inset 6px 6px 12px rgba( var(--color-shadow), 0.08),
			inset 8px 8px 16px rgba( var(--color-shadow), 0.08);
	}

.input {
	display: block;
	height: 60px;
	padding: 0 var(--space-xl);
	box-sizing: border-box;
	font-family: var(--font-primary);
	font-size: 18px;
	line-height: 60px;
	border-radius: var(--radius-default);
	border: none;
	color: var(--color-typo-primary);
	background: var(--color-control-bg-default);
	box-shadow:
		inset 1px 1px 1px rgba( var(--color-light), 0.4 ),
		inset -1px -1px 1px rgba( var(--color-shadow), 0.04 ),
		
		inset 0 0 0 2px var(--color-bg-default),
		
		inset -2px -2px 2px 2px rgba( var(--color-light), 0.4), 
		inset -4px -4px 4px 2px rgba( var(--color-light), 0.4),
		-1px -1px 4px 0px rgba( var(--color-light), 0.4), 
		-2px -2px 8px 0px rgba( var(--color-light), 0.4),

inset 2px 2px 2px 2px rgba( var(--color-shadow), 0.04),
		inset 4px 4px 4px 2px rgba( var(--color-shadow), 0.04),
		1px 1px 4px 0px rgba( var(--color-shadow), 0.04), 
		2px 2px 8px 0px rgba( var(--color-shadow), 0.04)
		;
}

.input:focus {
		outline: none;
	}

.input[type="number"] {
		padding-top: var(--space-xs);
		font-family: var(--font-digital);
		font-size: 40px;
		line-height: 40px;
	}

.input[type="number"]::-webkit-input-placeholder {
			color: rgba(0, 0, 0, 0.2);
		}

.input[type="number"]::-moz-placeholder {
			color: rgba(0, 0, 0, 0.2);
		}

.input[type="number"]:-ms-input-placeholder {
			color: rgba(0, 0, 0, 0.2);
		}

.input[type="number"]::-ms-input-placeholder {
			color: rgba(0, 0, 0, 0.2);
		}

.input[type="number"]::placeholder {
			color: rgba(0, 0, 0, 0.2);
		}

.input_form_brick-brick {
			border-radius: 0;
			border-right: 0;
		}

.input_form_default-brick {
			border-radius: var(--radius-default) 0 0 var(--radius-default);
			border-right: 0;
		}

.input_form_brick-default {
			border-radius: 0 var(--radius-default) var(--radius-default) 0;
		}

.choice-group {
	display: -webkit-inline-box;
	display: inline-flex;
	height: 60px;
	padding: var(--space-2xs);
	box-sizing: border-box;
	border-radius: var(--radius-default);
	background: var(--color-bg-default);
	box-shadow: 
		inset 1px 1px 1px rgba( var(--color-light), 0.6 ),
		inset -1px -1px 1px rgba( var(--color-shadow), 0.06 ),
		
		-1px -1px 4px 0px rgba( var(--color-light), 0.6), 
		-2px -2px 8px 0px rgba( var(--color-light), 0.6),
		
		1px 1px 4px 0px rgba( var(--color-shadow), 0.06), 
		2px 2px 8px 0px rgba( var(--color-shadow), 0.06)
		;
}

.choice-group__input {
		-webkit-appearance: none;
		-moz-appearance: none;
		     appearance: none;
		position: absolute;
	}

.choice-group__button {
		padding: 0 var(--space-l);
		background: transparent;
		border: 0;
		border-radius: var(--radius-s);
		color: var(--color-typo-primary);
		font-family: var(--font-primary);
		font-size: 18px;
		line-height: calc(60px - var(--space-2xs)*2);
		text-shadow: 
			0 -1px 0 rgba( var(--color-shadow), 0.08 ),
			0 1px 0 rgba( var(--color-light), 1 );
		-webkit-transition: 
			color 0.3s,
			background-color 0.3s,
			text-shadow 0.3s,
			box-shadow 0.6s
			;
		transition: 
			color 0.3s,
			background-color 0.3s,
			text-shadow 0.3s,
			box-shadow 0.6s
			;
	}

.choice-group__button:focus {
			outline: none;
		}

.choice-group__button:hover {
			color: var(--color-typo-link);
			text-shadow: 
				0 -1px 0 rgba( var(--color-shadow), 0.08 ),
				0 1px 0 rgba( var(--color-light), 1 ),
				0 0 1px rgba( var(--color-light), 0.7 ),
				0 0 4px rgba( var(--color-glow), 0.08 ),
				0 0 8px rgba( var(--color-glow), 0.08 );
		}

.choice-group__item {
		position: relative;
		height: 100%;
		cursor: pointer;
	}

.choice-group__item:not(:last-child) {
			margin-right: var(--space-2xs);
		}

.choice-group__input:checked + .choice-group__button  {
		color: var(--color-typo-link);
		background-color: var(--color-control-bg-default);
		text-shadow: 
			0 -1px 0 rgba( var(--color-shadow), 0.08 ),
			0 1px 0 rgba( var(--color-light), 1 ),
			0 0 1px rgba( var(--color-light), 0.7 ),
			0 0 4px rgba( var(--color-glow), 0.08 ),
			0 0 8px rgba( var(--color-glow), 0.08 )
			;
		box-shadow: 
			inset -2px -2px 2px 0px rgba( var(--color-light), 0.6), 
			inset -4px -4px 4px 0px rgba( var(--color-light), 0.6),

inset 2px 2px 2px 0px rgba( var(--color-shadow), 0.06),
			inset 4px 4px 4px 0px rgba( var(--color-shadow), 0.06)
			;
	}

.checkbox {
	position: relative;
	display: -webkit-inline-box;
	display: inline-flex;
	-webkit-box-align: center;
	        align-items: center;
	font-size: 18px;
	color: var(--color-typo-primary);
	cursor: pointer;
}

.checkbox__input {
		-webkit-appearance: none;
		-moz-appearance: none;
		     appearance: none;
		position: absolute;
	}

.checkbox__box {
		position: relative;
    box-sizing: border-box;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border-radius: var(--radius-xs);
    background-color: var(--color-bg-default);
		box-shadow: 
			inset 1px 1px 1px rgba( var(--color-light), 0.6 ),
			inset -1px -1px 1px rgba( var(--color-shadow), 0.06 ),

-1px -1px 1px 0px rgba( var(--color-light), 0.6),
			-1px -1px 4px 0px rgba( var(--color-light), 0.6), 
			-2px -2px 8px 0px rgba( var(--color-light), 0.6),

1px 1px 1px 0px rgba( var(--color-shadow), 0.06),
			1px 1px 4px 0px rgba( var(--color-shadow), 0.06), 
			2px 2px 8px 0px rgba( var(--color-shadow), 0.06)
			;
	}

.checkbox__box::before {
			content: '';
			position: absolute;
			z-index: 1;
			top: 5px;
			left: 5px;
			box-sizing: border-box;
			width: 14px;
			height: 14px;
			border-radius: 3px;
			background-color: var(--color-control-bg-default);
			-webkit-transition: 
				background-color 0.4s,
				box-shadow 0.4s
				;
			transition: 
				background-color 0.4s,
				box-shadow 0.4s
				;
		}

.checkbox__text {
		margin-left: var(--space-m);
    color: var(--color-typo-primary);
	}

.checkbox__input:checked + .checkbox__box::before {
		background-color: var(--color-control-bg-action);
		box-shadow: 
			inset 0 0 0px 1px rgba(  var(--color-glow), 0.3),
			inset 0 0 4px 1px rgba(  var(--color-glow), 0.3),
			inset 0 0 8px 1px rgba(  var(--color-glow), 0.3),
			
			inset -1px -1px 1px 0px rgba( var(--color-light), 0.6),
			inset -2px -2px 2px 0px rgba( var(--color-light), 0.3),

inset 1px 1px 1px 0px rgba( var(--color-shadow), 0.6),
			inset 2px 2px 2px 0px rgba( var(--color-shadow), 0.4)
			;
	}

.radio {
	position: relative;
	display: -webkit-inline-box;
	display: inline-flex;
	-webkit-box-align: center;
	        align-items: center;
	font-size: 18px;
	color: var(--color-typo-primary);
	cursor: pointer;
}

.radio__input {
		-webkit-appearance: none;
		-moz-appearance: none;
		     appearance: none;
		position: absolute;
	}

.radio__box {
		position: relative;
    box-sizing: border-box;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: var(--color-bg-default);
		box-shadow: 
			inset 1px 1px 1px rgba( var(--color-light), 0.6 ),
			inset -1px -1px 1px rgba( var(--color-shadow), 0.06 ),

-1px -1px 1px 0px rgba( var(--color-light), 0.6),
			-1px -1px 4px 0px rgba( var(--color-light), 0.6), 
			-2px -2px 8px 0px rgba( var(--color-light), 0.6),

1px 1px 1px 0px rgba( var(--color-shadow), 0.06),
			1px 1px 4px 0px rgba( var(--color-shadow), 0.06), 
			2px 2px 8px 0px rgba( var(--color-shadow), 0.06)
			;
	}

.radio__box::before {
			content: '';
			position: absolute;
			z-index: 1;
			top: 7px;
			left: 7px;
			box-sizing: border-box;
			width: 10px;
			height: 10px;
			border-radius: 50%;
			background-color: var(--color-control-bg-default);
			-webkit-transition: 
				background-color 0.4s 0.1s,
				box-shadow 0.4s
				;
			transition: 
				background-color 0.4s 0.1s,
				box-shadow 0.4s
				;
		}

.radio__text {
		margin-left: var(--space-m);
    color: var(--color-typo-primary);
	}

.radio__input:checked + .radio__box::before {
		background-color: var(--color-control-bg-action);
		box-shadow: 
			inset 0 0 0px 1px rgba(  var(--color-glow), 0.3),
			inset 0 0 4px 1px rgba(  var(--color-glow), 0.3),
			inset 0 0 8px 1px rgba(  var(--color-glow), 0.3),
			
			inset -1px -1px 1px 0px rgba( var(--color-light), 0.6),
			inset -2px -2px 2px 0px rgba( var(--color-light), 0.3),

inset 1px 1px 1px 0px rgba( var(--color-shadow), 0.6),
			inset 2px 2px 2px 0px rgba( var(--color-shadow), 0.4)
			;
	}

.select {
	position: relative;
	height: 60px;
	padding: 0 var(--space-4xl) 0 var(--space-xl);
	box-sizing: border-box;
	font-family: var(--font-primary);
	border: 0;
	border-radius: var(--radius-default);
	background-color: var(--color-bg-default);
	background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1329536/icon_select_s.svg');
	background-position: calc(100% - var(--space-m)) center;
	background-repeat: no-repeat;
	box-shadow: 
		inset 1px 1px 1px rgba( var(--color-light), 0.6 ),
		inset -1px -1px 1px rgba( var(--color-shadow), 0.06 ),
		
		-1px -1px 4px 0px rgba( var(--color-light), 0.6), 
		-2px -2px 8px 0px rgba( var(--color-light), 0.6),
		
		1px 1px 4px 0px rgba( var(--color-shadow), 0.06), 
		2px 2px 8px 0px rgba( var(--color-shadow), 0.06);
	font-size: 18px;
	line-height: 60px;
	-webkit-appearance: none;
	   -moz-appearance: none;
	        appearance: none;
}

.select::-ms-expand {
		display: none;
	}

.select:focus {
		outline: none;
	}

.select option {
		font-weight: normal;
	}

.switch {
	position: relative;
	display: -webkit-box;
	display: flex;
	-webkit-box-align: center;
	        align-items: center;
	cursor: pointer;
}

.switch__input {
    position: absolute;
		height: 100%;
    left: 0;
    top: 0;
    width: 100%;
		pointer-events: none;
    opacity: .0001;
	}

.switch__box {
    height: 28px;
    width: 52px;
		margin-right: var(--space-m);
		background-color: var(--color-bg-default);
    border-radius: var(--radius-xs);
		box-shadow:
			inset -2px -2px 2px 0px rgba( var(--color-light), 0.6), 
			inset -4px -4px 4px 0px rgba( var(--color-light), 0.6),

inset 2px 2px 2px 0px rgba( var(--color-shadow), 0.06),
			inset 4px 4px 4px 0px rgba( var(--color-shadow), 0.06),
			inset 0 0 green;
		-webkit-transition: box-shadow 0.2s ease;
		transition: box-shadow 0.2s ease;
	}

.switch__box::before {
    content: '';
    position: absolute;
    top: 4px; left: 4px;
    width: 20px;
		height: 20px;
		border-radius: 4px;
		background-color: var(--color-control-bg-default);
		box-shadow: 
			inset 1px 1px 1px rgba( var(--color-light), 0.6 ),
			inset -1px -1px 1px rgba( var(--color-shadow), 0.06 ),

-1px -1px 1px 0px rgba( var(--color-light), 0.6),
			-1px -1px 4px 0px rgba( var(--color-light), 0.6), 
			-2px -2px 8px 0px rgba( var(--color-light), 0.6),

1px 1px 1px 0px rgba( var(--color-shadow), 0.06),
			1px 1px 4px 0px rgba( var(--color-shadow), 0.06), 
			2px 2px 8px 0px rgba( var(--color-shadow), 0.06)
			;
    -webkit-transition: -webkit-transform .1825s ease-in-out;
    transition: -webkit-transform .1825s ease-in-out;
    transition: transform .1825s ease-in-out;
    transition: transform .1825s ease-in-out, -webkit-transform .1825s ease-in-out;
	}

.switch__box::after {
    content: '';
    position: absolute;
    top: 8px;
		left: 8px;
    width: 4px;
		height: 4px;
		border-radius: 50%;
		background-color: var(--color-control-bg-default);
		box-shadow:
			-1px -1px 1px 0px rgba( var(--color-light), 0.8),
			-1px -1px 4px 0px rgba( var(--color-light), 0.8), 
			-2px -2px 8px 0px rgba( var(--color-light), 0.8),

1px 1px 1px 0px rgba( var(--color-shadow), 0.1),
			1px 1px 4px 0px rgba( var(--color-shadow), 0.1), 
			2px 2px 8px 0px rgba( var(--color-shadow), 0.1),
			
			8px 0px var(--color-control-bg-default),
			7px -1px 1px 0px rgba( var(--color-light), 0.8),
			6px -1px 4px 0px rgba( var(--color-light), 0.8), 
			6px -2px 8px 0px rgba( var(--color-light), 0.8),

9px 1px 1px 0px rgba( var(--color-shadow), 0.1),
			9px 1px 4px 0px rgba( var(--color-shadow), 0.1), 
			10px 2px 8px 0px rgba( var(--color-shadow), 0.1),
			
			8px 8px var(--color-control-bg-default), 
			7px 7px 1px 0px rgba( var(--color-light), 0.8),
			7px 7px 4px 0px rgba( var(--color-light), 0.8), 
			6px 6px 8px 0px rgba( var(--color-light), 0.8),

9px 9px 1px 0px rgba( var(--color-shadow), 0.1),
			9px 9px 4px 0px rgba( var(--color-shadow), 0.1), 
			10px 10px 8px 0px rgba( var(--color-shadow), 0.1),
			
			0px 8px var(--color-control-bg-default),
			-1px 6px 1px 0px rgba( var(--color-light), 0.8),
			-1px 6px 4px 0px rgba( var(--color-light), 0.8), 
			-2px 9px 8px 0px rgba( var(--color-light), 0.8),

1px 9px 1px 0px rgba( var(--color-shadow), 0.1),
			1px 9px 4px 0px rgba( var(--color-shadow), 0.1), 
			2px 10px 8px 0px rgba( var(--color-shadow), 0.1);
    -webkit-transition: -webkit-transform .1825s ease-in-out;
    transition: -webkit-transform .1825s ease-in-out;
    transition: transform .1825s ease-in-out;
    transition: transform .1825s ease-in-out, -webkit-transform .1825s ease-in-out;
	}

.switch__input:checked + .switch__box::before, .switch__input:checked + .switch__box::after {
    -webkit-transform: translatex(24px);
            transform: translatex(24px);
	}

.switch__input:checked + .switch__box::before {
		box-shadow: 
			inset 1px 1px 1px rgba( var(--color-light), 0.6 ),
			inset -1px -1px 1px rgba( var(--color-shadow), 0.06 ),
			
			inset 0 0 0px 1px rgba(  var(--color-glow), 0.24),
			inset 0 0 4px 1px rgba(  var(--color-glow), 0.24),

-1px -1px 1px 0px rgba( var(--color-light), 0.16),
			-1px -1px 4px 0px rgba( var(--color-light), 0.16), 
			-2px -2px 8px 0px rgba( var(--color-light), 0.16),

1px 1px 1px 0px rgba( var(--color-shadow), 0.06),
			1px 1px 4px 0px rgba( var(--color-shadow), 0.06), 
			2px 2px 8px 0px rgba( var(--color-shadow), 0.06)
			;
	}

.switch__input:checked + .switch__box {
    box-shadow: 
			inset -2px -2px 2px 0px rgba( var(--color-light), 0.12), 
			inset -4px -4px 4px 0px rgba( var(--color-light), 0.12),
			
			inset 0 0 0px 1px rgba(  var(--color-glow), 0.3),
			inset 0 0 4px 1px rgba(  var(--color-glow), 0.3),
			inset 0 0 8px 1px rgba(  var(--color-glow), 0.3),

inset 2px 2px 2px 0px rgba( var(--color-shadow), 0.06),
			inset 4px 4px 4px 0px rgba( var(--color-shadow), 0.06),
			inset 54px 0 var(--color-control-bg-action),
		
			0 0 4px 1px rgba(  var(--color-glow), 0.16),
			0 0 12px 1px rgba(  var(--color-glow), 0.16);
	}

@font-face {
    font-family: 'Digital';
    src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1329536/subset-Digital-7Mono.woff2') format('woff2'),
        url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1329536/subset-Digital-7Mono.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,400i,600,700,900&display=swap');

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg