纯css制作“破镜重圆”效果_css 破镜重圆-CSDN博客

这篇博客展示了如何使用CSS来创建一种'破镜重圆'的交互效果。通过设置图片的Webkit_mask和mask属性，结合radial-gradient渐变和filter灰度滤镜，实现了图片在鼠标悬停时从破裂到完好的转变。代码示例中包含了多个不同图片的展示，可观察到相同的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

💛1.默认展示效果图如下：

在这里插入图片描述

💛2.移入上去展示的效果图如下：

在这里插入图片描述

💛3.代码如下：

<!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>css制作"破镜重圆"效果</title>
    <style>
        img {
            --m: radial-gradient(circle farthest-side at right, #000 99%, #0000) 0 100%/46% 92% no-repeat, radial-gradient(circle farthest-side at left, #000 99%, #0000) 100% 0/46% 92% no-repeat;
            -webkit-mask: var(--m);
            mask: var(--m);
            filter: grayscale(0.5);
            transition: 0.3s linear;
            cursor: pointer;
            width: 250px;
            height: 250px;
            margin-right: 30px;
        }

        img:hover {
            -webkit-mask-position: 7.5% 50%, 92.5% 50%;
            mask-position: 7.5% 50%, 92.5% 50%;
            filter: grayscale(0);
        }

    </style>
</head>

<body>
    <div class="dowebok">
        <img src="https://img0.baidu.com/it/u=1516415125,3684210222&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400">
        <img src="https://img2.baidu.com/it/u=3647216708,4098252510&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=375">
        <img src="https://img2.baidu.com/it/u=2009364689,3484689621&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400">
    </div>
</body>

</html>