图片滤镜效果

小小九天

已于 2024-09-29 18:22:05 修改

阅读量82

点赞数 1

文章标签： css css3 前端

于 2024-09-29 18:10:46 首次发布

本文链接：https://blog.csdn.net/as1278/article/details/142641125

版权

滤镜图片

原理是不是先把图片转化为二值化图，然后进行采点，点的分布可以用有规律的分布。更换图片就替换掉里面url的地址就可以。

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8" />
    <title>图片滤镜效果</title>
    <style>
        body {
            display: grid;
            place-content: center;
            height: 100vh;
            background: radial-gradient(circle at center, #444, #222);
        }

        body:before {
            content: '';
            position: absolute;
            bottom: 2.5px;
            left: 50%;
            transform: translate(-50%, 0);
            color: #fff;
            font-family: 'Futura';
            font-size: 12px;
        }

        body>div {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(2, 1fr);
            grid-column-gap: 2.5vmin;
            grid-row-gap: 2.5vmin;
        }

        body>div div {
            width: 45vmin;
            height: 45vmin;
            position: relative;
            overflow: hidden;
            box-shadow: 0 20px 40px -10px #000;
            --bg: url('https://tse1-mm.cn.bing.net/th/id/OIP-C.tnFOq4ukwZiWrSRvjSJ-6wHaEK?w=333&h=187&c=7&r=0&o=5&dpr=1.3&pid=1.7') 50% 50% / cover;
            background: var(--bg);
        }

        body>div div:hover:before,
        body>div div:hover:after {
            opacity: 0;
        }

        body>div div:before,
        body>div div:after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            transition: opacity 0.25s ease-in-out;
        }

        body>div div:before {
            filter: saturate(0);
            background: var(--bg), radial-gradient(closest-side, #222, #fff) 0px 0px/0.75vmin 0.75vmin;
            background-blend-mode: multiply;
            filter: saturate(0) brightness(1.25) blur(0.5px) contrast(30);
        }

        body>div div:after {
            background: linear-gradient(43deg, #4158d0 0%, #c850c0 46%, #ffcc70 100%);
            mix-blend-mode: screen;
        }

        body>div div:nth-of-type(2) {
            --bg: url('https://tse1-mm.cn.bing.net/th/id/OIP-C.tnFOq4ukwZiWrSRvjSJ-6wHaEK?w=333&h=187&c=7&r=0&o=5&dpr=1.3&pid=1.7') 50% 50% / cover;
        }

        body>div div:nth-of-type(2):before {
            background: repeating-radial-gradient(circle at 75% 40%, #333 1px, #fff 1px, #fff 5px, #333 5px, #333 6px), var(--bg);
            filter: saturate(0) brightness(1.25) blur(0.75px) contrast(30);
        }

        body>div div:nth-of-type(2):after {
            background: linear-gradient(147deg, #ffe53b 0%, #ff2525 74%);
        }

        body>div div:nth-of-type(3) {
            --bg: url('https://tse1-mm.cn.bing.net/th/id/OIP-C.tnFOq4ukwZiWrSRvjSJ-6wHaEK?w=333&h=187&c=7&r=0&o=5&dpr=1.3&pid=1.7') 50% 50% / cover;
        }

        body>div div:nth-of-type(3):before {
            background: repeating-linear-gradient(to bottom, #000 1px, #fff 1px, #fff 5px, #000 5px, #000 6px), var(--bg);
            filter: saturate(0) brightness(1.25) blur(0.75px) contrast(40);
        }

        body>div div:nth-of-type(3):after {
            background: linear-gradient(45deg, #40e0d0 -25%, #ff8c00, #ff0080 125%);
        }

        body>div div:nth-of-type(4) {
            --bg: url('https://tse1-mm.cn.bing.net/th/id/OIP-C.tnFOq4ukwZiWrSRvjSJ-6wHaEK?w=333&h=187&c=7&r=0&o=5&dpr=1.3&pid=1.7') 50% 50% / cover;
        }

        body>div div:nth-of-type(4):before {
            background: repeating-linear-gradient(to bottom, #333 1px, #fff 1px, #fff 6px, #333 6px, #333 7px), repeating-linear-gradient(to right, #333 1px, #fff 1px, #fff 6px, #333 6px, #333 7px), var(--bg);
            filter: saturate(0) brightness(1.25) blur(0.75px) contrast(30);
        }

        body>div div:nth-of-type(4):after {
            background: linear-gradient(-45deg, #2bc0e4, #eaecc6);
        }
    </style>
</head>

<body>
    <div id="wrap">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>

</html>

懒汉直接下载

图片滤镜效果下载

感谢各位的阅读，更多文章请前往九天小窝。