Author 王平安
E-mail pingan8787@qq.com
博 客 www.pingan8787.com
微 信 pingan8787
每日文章 https://0x9.me/KMrv3

filter滤镜

CSS滤镜属性，可以在元素呈现之前，为元素的渲染提供一些效果，如模糊、颜色转移之类的。滤镜常用于调整图像、背景、边框的渲染。SVG滤镜资源（SVG Filter Sources）是指以xml文件格式定义的svg滤镜效果集，可以通过URL引入并且通过锚点（#element-id）指定具体的一个滤镜元素。

查看 MDN上关于 filter 的文档

源代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>14-使用CSS3filter属性制作酷炫的果冻菜单</title>
    <style>
        .blobs {
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            filter: url(#goo);
        }
        
        .circle {
            position: absolute;
            width: 90px;
            height: 90px;
            line-height: 90px;
            text-align: center;
            transform: translate(0, -48px);
            background: hsl(337, 70%, 58%);
            clip-path: circle(42px at center);
        }
        
        .circle.main {
            z-index: 2;
        }
        
        .first {
            transition: transform 0.5s 100ms ease-out;
            background: hsl(307, 70%, 58%);
        }
        
        .second {
            transition: transform 0.5s 300ms ease-out;
            background: hsl(277, 70%, 58%);
        }
        
        .last {
            transition: transform 0.5s 500ms ease-out;
            background: hsl(247, 70%, 58%);
        }
        
        .first.show {
            transform: translate(-100px, -120px);
        }
        
        .second.show {
            transform: translate(0, -150px);
        }
        
        .last.show {
            transform: translate(100px, -120px);
        }
    </style>
</head>

<body>
    <div class="blobs">
        <div class="circle main">main</div>
        <div class="circle sub first">1</div>
        <div class="circle sub second">2</div>
        <div class="circle sub last">3</div>
    </div>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <defs>
            <filter id="goo">
                <feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur" />
                <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo" />
                <feBlend in="SourceGraphic" in2="goo" />
            </filter>
        </defs>
    </svg>
    <script>
        const button = document.querySelector('.circle.main');
        const circles = document.querySelectorAll('.circle.sub');

        button.addEventListener('click', () => {
            circles.forEach(ele => {
                ele.classList.toggle("show");
            })
        })
    </script>
</body>

</html>