|
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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>mix-blend-mode属性的应用</title>
<style>
* {
margin: 0;
padding: 0;
}
.container {
/* 定义变量 */
--mix-blend-mode: normal;
position: relative;
width: 300px;
height: 400px;
margin: 60px;
padding: 20px;
box-shadow: 0 0 6px 1px #999;
border-radius: 6px;
caret-color: transparent;
}
h3,
h4 {
margin-bottom: 10px;
}
.info-box {
width: 100%;
height: 24px;
line-height: 24px;
}
.circle {
position: absolute;
width: 200px;
height: 200px;
border-radius: 50%;
mix-blend-mode: var(--mix-blend-mode);
}
.red-box {
left: 70px;
top: 160px;
background-color: red;
}
.green-box {
left: 30px;
top: 220px;
background-color: lightgreen;
}
.blue-box {
left: 110px;
top: 220px;
background-color: blue;
}
</style>
</head>
<body>
<div class="container">
<h3>mix-blend-mode属性的应用</h3>
<h4 class="value-box"></h4>
<div class="info-box"></div>
<div class="circle red-box"></div>
<div class="circle green-box"></div>
<div class="circle blue-box"></div>
</div>
</body>
<script>
// 获取元素
var container = document.querySelector(".container");
var valueBox = document.querySelector(".value-box");
var infoBox = document.querySelector(".info-box");
// mix-blend-mode属性的取值列表及说明;
var values = [
{
id: 1,
name: "正常",
value: "normal",
info: "此属性不应用任何混合；"
},
{
id: 2,
name: "相乘",
value: "multiply",
info: "元素乘以背景并替换背景颜色，生成的颜色始终与背景一样暗；"
},
{
id: 3,
name: "叠加",
value: "overlay",
info: "根据背景颜色对内容进行倍增或屏蔽；这与硬光混合模式相反；"
},
{
id: 4,
name: "屏幕",
value: "screen",
info: "将背景和内容相乘，然后补充结果。这将导致内容比背景颜色更亮；"
},
{
id: 5,
name: "变暗",
value: "darken",
info: "当内容变暗时，背景将被替换为内容，否则将保持原样；"
},
{
id: 6,
name: "变亮",
value: "lighten",
info: "背景被替换为内容较亮的内容；"
},
{
id: 7,
name: "颜色变淡",
value: "color-dodge",
info: "此属性使背景颜色变亮，以反映内容的颜色;"
},
{
id: 8,
name: "颜色变淡",
value: "color-burn",
info: "这会使背景变暗，以反映内容的自然颜色;"
},
{
id: 9,
name: "硬光",
value: "hard-light",
info: "根据内容的颜色，此属性将对其进行筛选或倍增。"
},
{
id: 10,
name: "柔光",
value: " soft-light",
info: "根据内容的颜色，这会使其变暗或变亮；"
},
{
id: 11,
name: "差值",
value: "difference",
info: "这将从最亮的颜色中减去两种颜色中较深的一种；"
}, {
id: 12,
name: "排除",
value: "exclusion",
info: "与差值相似，但对比度较低；"
},
{
id: 13,
name: "色调",
value: "hue",
info: "通过内容的色调与背景的饱和度和亮度相结合来创建颜色；"
},
{
id: 14,
name: "饱和度",
value: "saturation",
info: "通过内容的饱和度和背景的色调和亮度来创建颜色；"
},
{
id: 15,
name: "颜色混合",
value: "color",
info: "根据内容的色调和饱和度以及背景的亮度创建颜色；"
},
{
id: 16,
name: "亮度",
value: "luminosity",
info: "根据内容的光度和背景的色调和饱和度创建颜色。这与颜色属性相反；"
}
]
changeMode();
// 改变mix-blend-mode
function changeMode() {
let index = 0;
modAttr(index);
let timerId = setInterval(() => {
if (index >= values.length) {
clearInterval(timerId);
return;
}
index++;
modAttr(index)
}, 3000)
}
function modAttr(index) {
// 设置mix-blend-mode的属性值
container.style.setProperty('--mix-blend-mode', values[index].value);
valueBox.innerHTML = `mix-blend-mode : ${values[index].value};`;
infoBox.innerHTML = `${values[index].name}(${values[index].value}): ${values[index].info}`
}
</script>
</html>
|
