CSS实现照妖镜效果

2,558 阅读2分钟

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

简单效果

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

示列效果:

Snipaste_2023-05-09_11-26-58.png

示列代码:

<!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的定位功能进行遮罩;然后通过背景透明进行显示

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

图片示列:

20230509_11:26:00_1.gif

代码示列:

<!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>

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

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

往期文章