資訊專欄INFORMATION COLUMN
摘要：今天我們看看這種色彩模式，能在中產生什么神奇的變化這是效果圖代碼在這兒像一串糖葫蘆，下面貼代碼一先給所有的一個樣式二用偽類給圓圈加線條三給每一個圓圈設置變量通過這個簡單的示例，可以掌握的用法以及變量
HSL色彩模式是工業界的一種顏色標準，是通過對色相(H)、飽和度(S)、明度(L)三個顏色通道的變化以及它們相互之間的疊加來得到各式各樣的顏色的。今天我們看看這種色彩模式，能在CSS中產生什么神奇的變化
這是效果圖
代碼在這兒：
https://codepen.io/woshilyy/p...
像一串糖葫蘆，下面貼代碼
HTML：
一、先給所有的span一個樣式
span {
position: absolute;
width: 100px;
height: 100px;
background: hsl(calc(360deg / 20 *var(--n)), 50%, 90%);
top: calc(120px * var(--n));
border-radius: 50%;
}
二、用偽類給圓圈加線條
span::before {
content: "";
position: absolute;
height: 20px;
width: 2px;
background: hsl(calc(360deg / 20 *var(--n)), 50%, 90%);
left: calc((100px - 2px)/2);
top: -20px;
}
三、給每一個圓圈設置變量
span:nth-child(1) {
--n: 1;
}
span:nth-child(2) {
--n: 2;
}
span:nth-child(3) {
--n: 3;
}
span:nth-child(4) {
--n: 4;
}
span:nth-child(5) {
--n: 5;
}
span:nth-child(6) {
--n: 6;
}
span:nth-child(7) {
--n: 7;
}
span:nth-child(8) {
--n: 8;
}
span:nth-child(9) {
--n: 9;
}
span:nth-child(10) {
--n: 10;
}
span:nth-child(11) {
--n: 11;
}
span:nth-child(12) {
--n: 12;
}
span:nth-child(13) {
--n: 13;
}
span:nth-child(14) {
--n: 14;
}
span:nth-child(15) {
--n: 15;
}
span:nth-child(16) {
--n: 16;
}
span:nth-child(17) {
--n: 17;
}
span:nth-child(18) {
--n: 18;
}
span:nth-child(19) {
--n: 19;
}
span:nth-child(20) {
--n: 20;
}
通過這個簡單的示例，可以掌握hsl的用法以及css變量
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/52923.html
摘要：效果預覽按下右側的點擊預覽按鈕可以在當前頁面預覽，點擊鏈接可以全屏預覽。可交互視頻此視頻是可以交互的，你可以隨時暫停視頻，編輯視頻中的代碼。繪制插頭上的陰影繪制線纜手持部分的陰影繪制線纜中稍粗部位的陰影最后，為畫面增加入場動畫大功告成 showImg(https://segmentfault.com/img/bVbeuTB?w=400&h=300); 效果預覽 按下右側的點擊預覽按鈕可...
摘要：效果預覽按下右側的點擊預覽按鈕可以在當前頁面預覽，點擊鏈接可以全屏預覽?？山换ヒ曨l此視頻是可以交互的，你可以隨時暫停視頻，編輯視頻中的代碼。繪制插頭上的陰影繪制線纜手持部分的陰影繪制線纜中稍粗部位的陰影最后，為畫面增加入場動畫大功告成 showImg(https://segmentfault.com/img/bVbeuTB?w=400&h=300); 效果預覽 按下右側的點擊預覽按鈕可...
閱讀 787·2021-11-11 16:54
閱讀 1517·2021-08-24 10:01
閱讀 1911·2019-08-30 15:54
閱讀 3296·2019-08-29 14:02
閱讀 3130·2019-08-28 18:22
閱讀 2245·2019-08-28 18:09
閱讀 3698·2019-08-26 10:26
閱讀 2665·2019-08-23 18:23
