css模拟实体按键开关效果代码-html代码-BFW代码库

css模拟实体按键开关效果代码

代码语言：html

代码描述：css模拟实体按键开关效果代码

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


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

<head>

  <meta charset="UTF-8">
  

<style>
@import url('https://fonts.googleapis.com/css2?family=Antonio&display=swap');

html, body {
	height: 100%;
}

body {
	--h: 0;
	--s: 0%;
	--l: 25%;
	--bg: hsl(var(--h), var(--s), var(--l));
	
	--size: 20vmin;
	--z: 0;
	--dur: 250ms;
	--ease: cubic-bezier(0.22, 1, 0.36, 1);
	
	display: grid;
	overflow: hidden;
	perspective: 50em;
	font-family: 'Antonio', sans-serif;
	text-transform: uppercase;
	background-color: var(--bg);
	transition: background-color var(--dur) var(--ease);
}

[data-switch="on"] {
	--h: 205;
	--s: 80%;
	--l: 100%;
}


.switch {
	margin: auto;
	display: grid;
	place-items: center;
	grid-template-rows: 1fr auto auto 1fr;
	transform-style: preserve-3d;
	transform: scale(0);
	animation: animate-in 1600ms 400ms var(--ease) forwards;
}

@keyframes animate-in {
	from {
		transform: rotateX(0) rotateZ(0) scale(0);
	}
	to {
		transform: rotateX(45deg) rotateZ(45deg) scale(1);
	}
}

.switch::before {
	content: '';
	position: relative;
	grid-column: 1 / -1;
	grid-row: 1 / -1;
	pointer-events: none;
	width: calc(var(--size) * 2);
	height: calc(var(--size) * 3);
	background-color: hsl(var(--h) var(--s) calc(var(--l) - 10%));
	transform: translateZ(-1px);
	transition: background-color var(--dur) var(--ease);
}

.switch input {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.switch label {
	--focus-border: 2px dashed dodgerblue;
	--focus-offset: -1vmin;
	
	grid-column: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	user-select: none;
	cursor: pointer;
	font-size: calc(var(--size) / 3);
	line-height: 1;
	text-shadow: hsla(0, 0%, 0%, 0.05) 2px 2px 0.2vmin;
	color: hsl(var(--h) var(--s) calc(var(--l) - 50%));
	width: var(--size);
	height: var(--size);
	background-color: hsl(var(--h) var(--s) var(--l));
	transform-style: preserve-3d;
	transition: var(--dur) var(--ease);
	transition-property: background-color, color, transform;
}

.switch input:focus + label {
	outline: var(--focus-border);
	outline-offset: var(--focus-offset);
}

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