发现css有一个好玩的效果，我们可以聚焦到一点上，其他的全是黑色（看不清的），已达到我们视觉上的探照灯或者照妖镜效果，下面我们将进行示列演示。
简单效果
我们先看看以下的文字效果（静态）
示列效果:
示列代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.flashlight {
width: 220px;
height: 220px;
background: radial-gradient(
circle
30px
at 110px 110px,
rgba(0,0,0,0),
rgba(0,0,0,1));
}
</style>
</head>
<body>
<div class="flashlight">
关关雎鸠，在河之洲。窈窕淑女，君子好逑。
参差荇菜，左右流之。窈窕淑女，寤寐求之。
求之不得，寤寐思服。悠哉悠哉，辗转反侧。
参差荇菜，左右采之。窈窕淑女，琴瑟友之。
参差荇菜，左右芼之。窈窕淑女，钟鼓乐之。
</div>
</body>
</html>
语法
- shape 确定圆的类型
- size 定义渐变的大小
- position 定义渐变的位置
具体文档，大家可以根据自己的需要去官方查看。
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
可移动探照灯
-
需求
放置一个小姐姐为背景，然后通过探照的方式将小姐姐的图片放出来
-
分析 本来是打算按照以上示列进行该功能的，后来发现图片背景不能遮罩；最后用到了CSS的定位功能进行遮罩；然后通过背景透明进行显示
-
注意 我这边只是做一个示列，所以只做了移动的效果，比如到盒子边线的处理啊；还有移入移除等处理我都是没有做的，如果大家有兴趣的话。可以尝试做一做这些功能
图片示列：
代码示列：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body,
html {
margin: 0;
padding: 0;
}
.flashlight {
position: relative;
width: 640px;
height: 360px;
}
.item {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
cursor: pointer;
background: radial-gradient(
circle
80px
at 180px 110px,
rgba(0,0,0,0),
rgba(0,0,0,.8));
z-index: 9;
}
img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="flashlight">
<div class="item"></div>
<img src="./nv.jpg" alt="">
</div>
</body>
<script>
const item = document.querySelector('.item');
item.addEventListener('mousemove',(e)=>{
const { offsetX, offsetY, pageX, pageY } = e;
let x = offsetX;
let y = offsetY; // black
item.style.background = `radial-gradient(
circle
80px
at ${x}px ${y}px,
rgba(0,0,0,0),
rgba(0,0,0,.8))`
})
</script>
</html>
今天的内容到这里就结束了。
如果您喜欢我的文章或者该文章对你有帮助，您也可以关注我的公众号：【前端雾恋】
往期文章
