等距灯开关

下载代码

html

css

分享到微信朋友圈

html

css

@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);
}

.switch input:focus:not(:focus-visible) + label {
	outline: none;
}

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

.switch label::before,
.switch label::after {
	position: absolute;
	right: 0;
	pointer-events: none;
	transition: background-color var(--dur) var(--ease);
}

.switch label::before {
	bottom: 0;
}

.switch input:checked + label {
	cursor: initial;
	background-color: hsl(var(--h) var(--s) calc(var(--l) - 5%));
}

.switch label:first-of-type {
	grid-row: 2;
	transform-origin: center bottom;
	transform: rotateX(-25deg);
}

.switch label:last-of-type {
	grid-row: 3;
	transform-origin: center top;
	transform: rotateX(25deg);
}

.switch input:checked + label {
	transform: rotateX(0);
}

.switch label::before,
.switch label::after {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
}

.switch label::before {
	height: calc(var(--size) / 2);
	background-color: hsl(var(--h) var(--s) calc(var(--l) - 15%));
}

.switch label::after {
	width: calc(var(--size) / 2);
	transform-origin: center right;
	background-color: hsl(var(--h) var(--s) calc(var(--l) - 20%));
}

.switch label:first-of-type::before {
	transform-origin: top center;
	transform: rotateX(-65deg);
}

.switch label:last-of-type::before {
	transform-origin: bottom center;
	transform: rotateX(65deg);
}

.switch label:first-of-type::after {
	transform: rotateY(-90deg) skewY(-25deg);
}

.switch label:last-of-type::after {
	transform-origin: center right;
	transform: rotateY(-90deg) skewY(25deg);
}

JavaScript

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