纯css实现色轮效果-html代码-BFW代码库

纯css实现色轮效果

代码语言：html

代码描述：纯css实现色轮效果

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

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

<style>
* {
	box-sizing: border-box;
}

body {
	min-height: 100vh;
	margin: 0;
	padding: max(10vh, 4rem) 2rem;
	display: grid;
	place-items: center;
	background-color: #061625;
}

.wheel {
	--h: 30deg;
	--s: 30deg;
	--gap: 1deg;
	--i: calc(var(--s) - var(--gap));
	--circle: radial-gradient(circle at center, transparent 45%, black 45%);
	--mask: repeating-conic-gradient(from calc(var(--gap) / 2 * -1 + (var(--s) / 2)), transparent, transparent var(--gap), black var(--gap), black calc(var(--i) - var(--gap)), transparent calc(var(--i) - var(--gap)), transparent calc(var(--i) + var(--gap))), var(--circle);
	width: 80vmin;
	height: 80vmin;
	position: relative;
	filter: drop-shadow(0 0.1rem 0.4rem rgba(0, 0, 0, 0.35));
}

.wheel::after {
	content: '';
	position: absolute;
	top: 0; 
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: radial-gradient(black, transparent 55%, transparent 65%, black 90%),
		conic-gradient(from calc(var(--s) / 2),
		hsl(var(--h), 50%, 50%) var(--s),
		hsl(calc(var(--h) * 2), 50%, 50%) var(--s),
		hsl(calc(var(--h) * 2), 50%, 50%) calc(var(--s) * 2),
		hsl(calc(var(--h) * 3), 50%, 50%) calc(var(--s) .........完整代码请登录后点击上方下载按钮下载查看