神奇的hsl

beanlam 发布于2019-08-02 11:20 / 3382人阅读

摘要：今天我们看看这种色彩模式，能在中产生什么神奇的变化这是效果图代码在这儿像一串糖葫芦，下面贴代码一先给所有的一个样式二用伪类给圆圈加线条三给每一个圆圈设置变量通过这个简单的示例，可以掌握的用法以及变量

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变量

GPU云服务器云服务器神奇的网站一个神奇的网站幻云我的世界神奇宝贝服务器我的世界神奇宝贝幻云服务器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/52923.html

神奇的hsl

摘要：今天我们看看这种色彩模式，能在中产生什么神奇的变化这是效果图代码在这儿像一串糖葫芦，下面贴代码一先给所有的一个样式二用伪类给圆圈加线条三给每一个圆圈设置变量通过这个简单的示例，可以掌握的用法以及变量 HSL色彩模式是工业界的一种颜色标准，是通过对色相(H)、饱和度(S)、明度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的。今天我们看看这种色彩模式，能在CSS中产生...

MudOnTire 2019-08-29 16:28 评论0 收藏0
前端每日实战：93# 视频演示如何用纯 CSS 创作一根闪电连接线

摘要：效果预览按下右侧的点击预览按钮可以在当前页面预览，点击链接可以全屏预览。可交互视频此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。绘制插头上的阴影绘制线缆手持部分的阴影绘制线缆中稍粗部位的阴影最后，为画面增加入场动画大功告成 showImg(https://segmentfault.com/img/bVbeuTB?w=400&h=300); 效果预览按下右侧的点击预览按钮可...

Eric 2019-08-29 16:12 评论0 收藏0
前端每日实战：93# 视频演示如何用纯 CSS 创作一根闪电连接线

摘要：效果预览按下右侧的点击预览按钮可以在当前页面预览，点击链接可以全屏预览。可交互视频此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。绘制插头上的阴影绘制线缆手持部分的阴影绘制线缆中稍粗部位的阴影最后，为画面增加入场动画大功告成 showImg(https://segmentfault.com/img/bVbeuTB?w=400&h=300); 效果预览按下右侧的点击预览按钮可...

elliott_hu 2019-08-02 11:03 评论0 收藏0