CSS实现照妖镜效果

发现css有一个好玩的效果，我们可以聚焦到一点上，其他的全是黑色(看不清的)，已达到我们视觉上的探照灯或者照妖镜效果，下面我们将进行示列演示。

简单效果

我们先看看以下的文字效果(静态)

示列效果:

示列代码:

```javascript

Document .flashlight {width: 220px;height: 220px;background: radial-gradient(circle30pxat 110px 110px,rgba(0,0,0,0),rgba(0,0,0,1));}

关关雎鸠，在河之洲。窈窕淑女，君子好逑。参差荇菜，左右流之。窈窕淑女，寤寐求之。求之不得，寤寐思服。悠哉悠哉，辗转反侧。参差荇菜，左右采之。窈窕淑女，琴瑟友之。参差荇菜，左右芼之。窈窕淑女，钟鼓乐之。

```

语法

shape 确定圆的类型
size 定义渐变的大小
position 定义渐变的位置

具体文档，大家可以根据自己的需要去官方查看。

javascript background-image: radial-gradient(shape size at position, start-color, ..., last-color);

可移动探照灯

需求

放置一个小姐姐为背景，然后通过探照的方式将小姐姐的图片放出来
分析本来是打算按照以上示列进行该功能的，后来发现图片背景不能遮罩；最后用到了CSS的定位功能进行遮罩；然后通过背景透明进行显示
注意我这边只是做一个示列，所以只做了移动的效果，比如到盒子边线的处理啊；还有移入移除等处理我都是没有做的，如果大家有兴趣的话。可以尝试做一做这些功能

图片示列：

代码示列：

```javascript

Document 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(circle80pxat 180px 110px,rgba(0,0,0,0),rgba(0,0,0,.8));z-index: 9;}img {width: 100%;height: 100%;}

```

今天的内容到这里就结束了。

如果您喜欢我的文章或者该文章对你有帮助，您也可以关注我的公众号：【前端雾恋】

往期文章

css登录按钮炫酷效果
css是你永远学不会的语言
electron 中使用本地数据库
electron 中 webview的使用
前端使用electron+vue3+ts搭建一个桌面端应用且可以热更新