【奇技淫巧】用CSS修改嵌入的svg icon图标图片的颜色-CFANZ编程社区

【奇技淫巧】用CSS修改嵌入的svg icon图标图片的颜色

方法一：用相位移动

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>iconfont.cn-svg</title>
    <style>
        .svg {
            cursor: pointer;
            overflow: hidden;
            width: 200px;
            height: 100px;
        }

        .svg-img {
            transition: .382s ease;
            /*背景图片*/
            width: 100%;
            height: 100%;
            background: transparent url.svg) no-repeat center / cover;
            filter: drop-shadow(200px 0 blue);
        }

        .svg:hover .svg-img {
            transform: translateX(-100%);
        }
    </style>
</head>
<body>
<div class="svg">
    <div class="svg-img"></div>
</div>
</body>
</html>

效果如图：

方法二：用伪类覆盖切换颜色

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>iconfont.cn-svg</title>
    <style>
        .svg {
            width: 200px;
            height: 100px;
            position: relative;
            overflow: hidden;
        }

        .svg:before, .svg:after {
            content: '';
            position: absolute;
            transition: .382s ease;
            cursor: pointer;
            overflow: hidden;
            /*背景图片*/
            width: 100%;
            height: 100%;
            background: transparent url.svg) no-repeat center / cover;
        }

        .svg:after {
            filter: drop-shadow(200px 0 blue);
            left: -100%;
            opacity: 0;
        }

        .svg:hover:before {
            opacity: 0;
        }

        .svg:hover:after {
            opacity: 1;
        }
    </style>
</head>
<body>
<div class="svg"></div>
</body>
</html>

效果如图：

有小伙伴锁这种方法代码量太多了，可以简单粗暴的方式来解决的问题我们就只需要三行代码

0 条评论