HTML5+CSS3小实例：弹出式悬停效果

制作不易安利给大家前端实用的小实例 cv可直接运行使用

效果图：

HTML：

<!DOCTYPE html>
<html lang="zh-CN">
<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>弹出式悬停效果</title>
    <link rel="stylesheet" href="207.css">
</head>
<body>
    <div class="container">
        <img src="/images/op/3mei/luobin.png" alt="">
        <img src="/images/op/3mei/hankuke.png" alt="">
        <img src="/images/op/3mei/namei.png" alt="">
    </div>
</body>
</html>

css：

*{
    /* 初始化 */
    margin: 0;
    padding: 0;
}
body{
    /* 100%窗口宽高 */
    min-height: 100vh;
    /* 弹性布局 水平+垂直居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fef0ff;
}
img{
    /* 定义自定义属性，可通过var函数进行调用 */
    /* 图片尺寸 */
    --s:200px;
    /* 边框大小 */
    --b:6px;
    /* 边框颜色 */
    --c:#eb9dff;
    /* 背景颜色 */
    --cb:#c87be4;
    /* 缩放值 */
    --sc:1;

    width: var(--s);
    height: var(--s);
    margin: 5px;
    padding-top: 25px;
    cursor: pointer;
    border-radius: 0 0 999px 999px;
    /* 设置background-position、background-repeat、background-clip */
    --g:50%/calc(100% / var(--sc)) 100% no-repeat content-box;
    /* 计算轮廓与边框边缘的距离 */
    --o:calc((1 / var(--sc) - 1) * var(--s) / 2 - var(--b));
    /* 设置轮廓 */
    outline: var(--b) solid var(--c);
    /* 轮廓与边框边缘的距离 */
    outline-offset: var(--o);
    /* 背景 */
    background: radial-gradient(circle closest-side, var(--cb) calc(99% - var(--b)),var(--c) calc(100% - var(--b)) 99%,transparent) var(--g);
    /* 遮罩 */
    -webkit-mask: linear-gradient(#000 0 0) no-repeat 50% calc(1px - var(--o)) / calc(100% / var(--sc) - 2 * var(--b) - 2px) 50%,
    radial-gradient(circle closest-side,#000 99%,transparent) var(--g);
    /* 默认缩放值 */
    transform: scale(var(--sc));
    transition: 0.5s;
}
/* 悬停时图片放大 */
img:hover{
    --sc:1.4;
}
/* 为第2、3张图片设置背景颜色、边框颜色 */
img:nth-child(2){
    --c:#ffacc6;
    --cb:#ff75a1;
}
img:nth-child(3){
    --c:#4bd2ff;
    --cb:#03aee6;
}

图片素材：

images/op/3mei（这是我放置图片的路径，若要修改别忘了代码里的路径也要改噢~）