ShiningDan的博客

网页组件制作之七色卡

发表于 | 分类于 | | 阅读次数

在该笔记中将学到列表展示中七色卡效果的方法与展示效果

本系列的是参考慕课网 大漠老师的视频，仅供个人查阅使用，具体讲解推荐参考视频。

显示效果为：

注意点

使用 CSS3 中的elem.nth-child(n) 函数来获得某元素父元素的第 n 个子元素。

使用 Sass 的 HSL 颜色函数来获得颜色，并且改变亮度。

使用 Sass 的 Map 来颜色名字和颜色的对应关系。

使用 Sass 的 String 类型的时候需要注意，什么时候是 String 类型，什么时候是其他的类型。

使用插值 #{} 的时候需要注意，插值一般用在将变量的值插入到某些属性名或属性值中，与其他的字符一起组成完整的属性名或变量名或CSS/CSS3函数。如果不是要和其他的字符一起组成属性名或变量名或CSS3函数，则不可以使用插值。

代码如下：

Sass 部分：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
$redBase: #DC143C;
$orangeBase: saturate(lighten(adjust_hue($redBase, 39), 5), 7);//#f37a16
$yellowBase: saturate(lighten(adjust_hue($redBase, 64), 6), 13);//#fbdc14
$greenBase: desaturate(darken(adjust_hue($redBase, 102), 2), 11);//#73c620
$blueBase: saturate(darken(adjust_hue($redBase, 201), 2), 1);//#12b7d4
$purpleBase: saturate(darken(adjust_hue($redBase, 296), 2), 1);//#a012d4
$blackBase: #777;
$bgc: #fff;

@mixin swatchesDarken($color) {
	@for $i from 1 through 10 {
		$x:$i+11;
		li:nth-child(#{$x}) {
			$bgc:darken($color, $i*5);
			background-color: $bgc;
		};
	}
}
@mixin swatchesLighten($color) {
	@for $i from 1 through 10 {
		$x:11-$i;
		li:nth-child(#{$x}) {
			$bgc:lighten($color, $i*5);
			background-color: $bgc;
		};
	}
}

body{
	margin: 0;
	padding: 0;
	background-color: #fff;
	.wrap {
		width: 500px;
		margin: 100px auto;
		background-color: #000;
		.swatches {
			width: 500px;
			height: 60px;
			margin: 0;
			padding: 0;
			li {
				list-style: none;
				width: 4.7619047619%;
				float: left;
				height: 60px;
			}
		}
	}
}

$list: (
	red: $redBase, 
	orange: $orangeBase, 
	yellow: $yellowBase, 
	green: $greenBase, 
	blue: $blueBase, 
	purple: $purpleBase,
	black: $blackBase
);

@each $name,$color in $list {
	ul.#{$name} {
    	@include swatchesDarken($color);
    	@include swatchesLighten($color);
    	li:nth-child(11) {
        	background-color: $color;
    	}
	}
}

HTML部分：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>七色卡</title>
    <link rel="stylesheet" href="test.css" type="text/css">
</head>

<body>
    <div class="wrap">
        <ul class="swatches red">
            <li></li>
            ...//一共21个 li
            <li></li>
        </ul>
        <ul class="swatches orange">
            <li></li>
            ...
            <li></li>
        </ul>
        <ul class="swatches yellow">
            <li></li>
            ...
            <li></li>
        </ul>
        <ul class="swatches green">
            <li></li>
            ...
            <li></li>
        </ul>
        <ul class="swatches blue">
            <li></li>
            ...
            <li></li>
        </ul>
        <ul class="swatches purple">
            <li></li>
            ...
            <li></li>
        </ul>
        <ul class="swatches black">
        	<li></li>
        	...
        	<li></li>
        </ul>
    </div>
</body>

</html>