HTML5是一種絕妙的技術(shù)，提供了許多令人驚嘆的功能。之一是同心圓調(diào)色器，這是一個(gè)強(qiáng)大的工具，可以為網(wǎng)站創(chuàng)建漂亮的顏色主題。以下是一個(gè)簡單的HTML5同心圓調(diào)色代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>同心圓調(diào)色器</title>
<style>
#color-picker {
position: relative;
width: 200px;
height: 200px;
margin: 40px auto;
}
#color-picker div {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
transform: rotate(45deg);
}
#inner-circle {
background-image: linear-gradient(to top, red, orange, yellow, green, blue, purple, pink);
}
#outer-circle {
background: #fff;
box-shadow: 0 0 0 20px rgba(0, 0, 0, .1);
z-index: -1;
}
#output {
width: 100%;
text-align: center;
font-size: 28px;
margin-top: 24px;
}
</style>
</head>
<body>
<div id="color-picker">
<div id="inner-circle"></div>
<div id="outer-circle"></div>
</div>
<div id="output"></div>
<script>
var innerCircle = document.getElementById('inner-circle');
var output = document.getElementById('output');
innerCircle.addEventListener('mousemove', function(event) {
var cx = this.offsetWidth / 2;
var cy = this.offsetHeight / 2;
var dx = event.pageX - this.offsetLeft - cx;
var dy = event.pageY - this.offsetTop - cy;
var angle = Math.atan2(dy, dx) * 180 / Math.PI;
if (angle< 0) {
angle += 360;
}
var color = 'hsl(' + angle + ', 100%, 50%)';
document.body.style.background = color;
output.innerHTML = color;
});
</script>
</body>
</html>在這個(gè)代碼中，有一個(gè)名為“color-picker”的DIV，其寬度和高度都為200像素，并被設(shè)置為相對(duì)定位。在它的內(nèi)部，有兩個(gè)DIV：一個(gè)名為“inner-circle”的DIV，占據(jù)整個(gè)區(qū)域。它使用CSS線性漸變來填充每個(gè)顏色，并帶有border-radius屬性，使其變成一個(gè)圓。另一個(gè)名為“outer-circle”的DIV將白色背景和投影添加到原始圓的外部。
JS實(shí)現(xiàn)用戶在鼠標(biāo)在“inner-circle”上移動(dòng)時(shí)，將背景顏色更改為由鼠標(biāo)移動(dòng)的角度的HSL顏色。我們使用event.pageX和event.pageY確定鼠標(biāo)的位置，然后使用Math.atan2來計(jì)算角度。最后，我們將HSL顏色值應(yīng)用于body元素和名為“output”的DIV中（在其中呈現(xiàn)所選顏色的文本）。
這個(gè)簡單的HTML5同心圓調(diào)色代碼是一個(gè)很好的起點(diǎn)，可以根據(jù)自己的需要進(jìn)行修改和擴(kuò)展，制作出來很棒的顏色主題。