1、先看效果图
上图中比较麻烦的是每块的底色处理,下面看怎么处理👇
2、:nth-child(n) 选择器
匹配属于其父元素的第 N 个子元素,不论元素的类型。
n 可以是数字、关键词或公式。
-
数字:最常见的使用方式,eg:
:nth-child(1)
-
Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词(第一个子元素的下标是 1)。
-
使用公式 (an + b)。描述:表示周期的长度,n 是计数器(从 0 开始),b 是偏移值。
3、主要思路:
-
运用less混合传参,参数既是 :nth-child(n) 选择器的公式
-
在混合里面处理每个原色的底色,通过 :nth-child(n) 选择器结合 ::after 伪元素实现。
有了思路之后,下面让我们看一下具体的代码实现👇
4、代码实现
以下只贴颜色处理的核心代码👇
.colorLine(@index, @startColor, @endColor) {
.li-item:nth-child(@{index})::after {
background: linear-gradient(136deg, @startColor, @endColor);
}
}
.colorLine(1n, rgba(255, 122, 109, 1), rgba(255, 77, 62, 1));
.colorLine(2n, rgba(93, 219, 224, 1), rgba(0, 188, 218, 1));
.colorLine(3n, rgba(59, 220, 72, 1), rgba(92, 209, 46, 1));
.colorLine(4n, rgba(254, 190, 43, 1), rgba(255, 163, 0, 1));
.colorLine(5n, rgba(148, 117, 247, 1), rgba(119, 83, 233, 1));
4.1、说明:
通过Less混合传参,实现指定了下标是 1,2,3,4,5
的倍数的所有 li-item
元素的伪元素背景色
。
我是 甜点cc☭
公号:【看见另一种可能】
热爱前端开发,也喜欢专研各种跟本职工作关系不大的技术,技术、产品兴趣广泛且浓厚。本号主要致力于分享个人经验总结,希望可以给一小部分人一些微小帮助。
希望能和大家一起努力营造一个良好的学习氛围,为了个人和家庭、为了我国的互联网物联网技术、数字化转型、数字经济发展做一点点贡献。数风流人物还看中国、看今朝、看你我。