欢迎大家关注我的公众号【正义的程序猿】
大部分都是聊技术，偶尔会发点感概，生活总结。
先来看下效果：
60
可以看到，光标的位置像一个手电筒一样照着，这就是今天我们要实现的光照效果，主要代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <div class="box">
<div class="effect"></div>
<div class="item-list">
<div class="flex-row item-list-row">
<div class="flex-side flex-row item">
<div class="flex-side icon"></div>
<div class="flex-main">
<div class="name">系统</div>
<div class="desc">显示、声音、通知、电源</div>
</div>
</div>
</div>
</div>
</div>
|
CSS样式：
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
| .flex-row {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
}
.box {
position: relative;
display: inline-block;
color: #fff;
font-size: 20px;
background-color: #000;
--pt-x: 0;
--pt-y: 0;
}
.box .effect {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: radial-gradient(
circle at calc(var(--pt-x) * 1px) calc(var(--pt-y) * 1px),
#fff,
rgba(255, 255, 255, 0) 4em
);
z-index: 0;
}
.box .item-list {
z-index: 2;
}
.box .item-list .item {
position: relative;
margin: 1em;
padding: 1em;
line-height: 1.5em;
border: 2px solid rgba(255, 255, 255, 0.5);
background-color: rgba(0, 0, 0, 0.7);
background-clip: padding-box;
box-shadow: 0 0 0 1em #000;
}
.box .item-list .item .icon {
margin-right: 1em;
width: 1.5em;
height: 1.5em;
background-color: rgba(255, 255, 255, 0.5);
}
.box .item-list .item .desc {
color: #999;
font-size: 16px;
}
|
然后是几行javascript代码：
1
2
3
4
5
6
7
8
| document.addEventListener("DOMContentLoaded", function () {
let domBox = document.querySelector(".box");
domBox.addEventListener("mousemove", function ($evt) {
let rect = domBox.getBoundingClientRect();
domBox.style.setProperty("--pt-x", $evt.pageX - rect.left);
domBox.style.setProperty("--pt-y", $evt.pageY - rect.top);
});
});
|
稍微讲解下原理，首先样式的效果主要是在<div class="effect"></div>这个标签上设置的，然后设置样式为absolute绝对定位，就相当于父级元素的蒙层，背景颜色是一个径向渐变，大概是这样：
1
2
3
4
5
6
7
8
| .box-effect {
margin-top: 20px;
border: 1px solid black;
width: 310px;
height: 120px;
background: radial-gradient( #fff,
rgba(0, 0, 0, 1) 4em);
}
|
14413
javascript代码就是获取鼠标的位置，然后把上面径向渐变的中心点实时修改成鼠标的位置，大概就是这样：
14524
最后，调整CSS将光照涂层和另一个图层合并，效果就实现了，CSS调整大致就是z-index，position和背景色rgba的设置，具体就不讲解了，原理大概就是这样了。
欢迎阅读本篇文章，如有兴趣可以关注博主公众号哦：
