hsl色彩应用演示
<style>.mama {
margin: 60px auto;
width: 200px;
height: 200px;
position: relative;
animation: rot 8s linear infinite;
}
e-son {
position: absolute;
left: calc(50% - 15px);
top: 18px;
width: 30px;
height: 80px;
border-radius: 10% 90%;
border: 1px solid gray;
transform-origin: 50% 100%;
transform: rotate( calc(var(--bg) * 1deg) ) translateY(-10px);
background: hsl(var(--bg), 100%, 50%);
}
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div class="mama" id="ma"></div>
<script>
var total = 6;
Array.from({length: 6}).forEach((e,k) => {
e = document.createElement('e-son');
e.style.cssText += `--bg: ${60 * k};`;
ma.appendChild(e);
});
</script>
hsl，h = hue，色相（0~360）；s = saturation，饱和度（0%~100%），l = lightness，亮度（0%~100%）。正常颜色的饱和度为 100%，亮度为 50%。下面代码展示色轮上6种代表性颜色与角度的关系：
<style>
.mama {
margin: 15px auto;
width: 400px;
height: 400px;
position: absolute;
}
.son {
position: absolute;
left: calc(50% - 30px);
top: 40px;
width: 60px;
height: 160px;
border-radius: 10% 90%;
border: 1px solid gray;
transform-origin: 50% 100%;
writing-mode: vertical-rl;
text-orientation: upright;
color: black;
display: grid;
place-items: center;
background: var(--bg);
}
.son:nth-of-type(1) { --bg: hsl(60,100%,50%); transform: rotate(60deg) translateY(-15px); }
.son:nth-of-type(2) { --bg: hsl(120,100%,50%); transform: rotate(120deg) translateY(-15px); }
.son:nth-of-type(3) { --bg: hsl(180,100%,50%); transform: rotate(180deg) translateY(-15px); }
.son:nth-of-type(4) { --bg: hsl(240,100%,50%); transform: rotate(240deg) translateY(-15px); color: silver; }
.son:nth-of-type(5) { --bg: hsl(300,100%,50%); transform: rotate(300deg) translateY(-15px); }
.son:nth-of-type(6) { --bg: hsl(360,100%,50%); transform: rotate(360deg) translateY(-15px); }
</style>
<div class="mama">
<div class="son">黄 60</div>
<div class="son">绿 120</div>
<div class="son">青 180</div>
<div class="son">蓝 240</div>
<div class="son">品红 300</div>
<div class="son">红 360</div>
</div>
这个有意思，选装的度数和色相变化是相同的呢{:4_187:} 一楼的更巧妙，直接利用60的倍数就生成图形颜色了，更简便。到底是js更强大啊{:4_199:} 这个怪好看的。看到就是旋转的。。{:4_199:} 南无月 发表于 2024-5-28 18:04
这个怪好看的。看到就是旋转的。。
做成帖子了 马黑黑 发表于 2024-5-28 18:07
做成帖子了
白老师好速度，我去看看。。{:4_199:} 二楼代码里每个页片上都有角度和说明，看着更明白了。{:4_173:} 南无月 发表于 2024-5-28 18:58
白老师好速度，我去看看。。
{:4_190:} 南无月 发表于 2024-5-28 18:59
二楼代码里每个页片上都有角度和说明，看着更明白了。
是的吧 马黑黑 发表于 2024-5-28 19:28
是的吧
必须的呀，蓝色叶片还另外用了银色，是怕看不清吧。。{:4_173:} 马黑黑 发表于 2024-5-28 19:27
一个字：真是美呀。。 南无月 发表于 2024-5-28 19:42
一个字：真是美呀。。
一二三四五六七八九十 南无月 发表于 2024-5-28 19:41
必须的呀，蓝色叶片还另外用了银色，是怕看不清吧。。
前景色与背景色要基本配套 马黑黑 发表于 2024-5-28 20:22
一二三四五六七八九十
看着好多字，其实重要的就都一个字的{:4_170:} 马黑黑 发表于 2024-5-28 20:23
前景色与背景色要基本配套
黑色百搭。。白色也百搭。。{:4_170:} 南无月 发表于 2024-5-29 17:51
黑色百搭。。白色也百搭。。
反正不白搭 南无月 发表于 2024-5-29 17:51
看着好多字，其实重要的就都一个字的
差不多的吧 马黑黑 发表于 2024-5-29 18:03
反正不白搭
搭得这么好不能白搭。。
搭色大师就是你{:4_199:} 马黑黑 发表于 2024-5-29 18:12
差不多的吧
对，十个跟一个差不多。
页:
[1]
2