Skip to content

Commit b093236

Browse files
maliangcodermaliangcoder
committed
css实现颜色开关
1 parent 96e1607 commit b093236

File tree

2 files changed

+31
-0
lines changed

2 files changed

+31
-0
lines changed

‎CSS案例/25-咖啡杯挪动开关动画效果/OIP-C.jpeg

-11.2 KB
Binary file not shown.

‎常用的CSS主流布局案例(1~8)/09_颜色开关.html

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>颜色开关</title>
6+
<style>
7+
.color-swatch{
8+
width: 200px;
9+
display: flex;
10+
flex-wrap: wrap;
11+
}
12+
.color-swatch-item{
13+
border-radius: 100%;
14+
height: 25px;
15+
width: 25px;
16+
margin: 3px;
17+
background-color: var(--color);
18+
}
19+
</style>
20+
</head>
21+
<body>
22+
<div class="color-swatch">
23+
<div class="color-swatch-item" style="--color: red"></div>
24+
<div class="color-swatch-item" style="--color: khaki"></div>
25+
<div class="color-swatch-item" style="--color: blue"></div>
26+
<div class="color-swatch-item" style="--color: green"></div>
27+
<div class="color-swatch-item" style="--color: pink"></div>
28+
<div class="color-swatch-item" style="--color: orange"></div>
29+
</div>
30+
</body>
31+
</html>

0 commit comments

Comments
 (0)