CSS实现照妖镜效果

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

简单效果

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

示列效果:

示列代码:

```javascript

```

语法

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

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

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

可移动探照灯

• 需求

  放置一个小姐姐为背景，然后通过探照的方式将小姐姐的图片放出来

• 分析 本来是打算按照以上示列进行该功能的，后来发现图片背景不能遮罩；最后用到了CSS的定位功能进行遮罩；然后通过背景透明进行显示

• 注意 我这边只是做一个示列，所以只做了移动的效果，比如到盒子边线的处理啊；还有移入移除等处理我都是没有做的，如果大家有兴趣的话。可以尝试做一做这些功能

图片示列：

代码示列：

```javascript

```

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

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

往期文章

• css登录按钮炫酷效果

• css是你永远学不会的语言

• electron 中使用本地数据库

• electron 中 webview的使用

• 前端使用electron+vue3+ts搭建一个桌面端应用且可以热更新