CSS100Day(8)-水滴液态融合两个filter属性理解

设计简介#

设计一个大水滴，然后内部8个元素旋转展示“摔的感觉”，外部6个元素旋转，旋转出去和回来使用transform-origin实现

核心知识1：融合效果也称之为Gooey Effect效果，核心是filter属性的两个函数配合，缺一不可

关键组合是：filter: contrast() + filter: blur()，分别作用在不同层级

属性	作用层级	作用
`filter: contrast(20-30)`	父容器	提高整体对比度，强制将子元素边缘模糊收缩回来，边缘被吸收的感觉，从而呈现融合的液态感觉
`filter: blur(2px-10px)`	子元素	让元素边缘模糊，产生向外扩散的“粘性边缘”

其他知识2：

效果展示#

实现代码和步骤#

HTML部分#

容器.frame设计超大对比度filter:contrast(25)

一个中心圆当做filter: blur(15)大一点吸收边缘模糊，8个小球扩展中心圆，起到弹性效果

另外6个球改变transform-origin，在外部rotate摔出然后回来融合

1
<div class="frame">
2
    <div class="center">
3
        <div class="ball"></div>
4
        <div class="blubb-1"></div>
5
        <div class="blubb-2"></div>
6
        <div class="blubb-3"></div>
7
        <div class="blubb-4"></div>
8
        <div class="blubb-5"></div>
9
        <div class="blubb-6"></div>
10
        <div class="blubb-7"></div>
11
        <div class="blubb-8"></div>
12
        <div class="sparkle-1"></div>
13
        <div class="sparkle-2"></div>
14
        <div class="sparkle-3"></div>
15
        <div class="sparkle-4"></div>
16
        <div class="sparkle-5"></div>
17
        <div class="sparkle-6"></div>
18
    </div>
19
</div>

CSS部分#

首先外部大容器作为大对比度容器

1
.frame {
2
    width: 400px;
3
    height: 400px;
4
    box-shadow: 1px 2px 10px 0 rgba(0, 0, 0, 0.3);
5
    background-color: #000;
6
    border-radius: 2px;
7
    filter: contrast(25);
8
}
9

10
.center {
11
    position: absolute;
12
    top: 50%;
13
    left: 50%;
14
    transform: translate(-50%, -50%);
15
}

然后中心园，边缘模糊强烈一点filter: blur(15px)

1
.ball {
2
    position: relative;
3
    width: 90px;
4
    height: 90px;
5
    background-color: #fff;
6
    border-radius: 50%;
7
    filter: blur(15px);
8
}

内部八个小球，边缘较小模糊filter: blur(5px);，transform-origin不超过大圆球，导致圆球边缘有突出感觉

1
.blubb-1,
2
.blubb-2,
3
.blubb-3,
4
.blubb-4,
5
.blubb-5,
6
.blubb-6,
7
.blubb-7,
8
.blubb-8 {
9
    position: absolute;
10
    top: 20px;
11
    left: 20px;
12
    width: 50px;
13
    height: 50px;
14

15
    &::after {
16
        position: absolute;
17
        display: block;
18
        content: "";
19
        width: 50px;
20
        height: 50px;
21
        background-color: #fff;
22
        border-radius: 50%;
23
        filter: blur(5px);
24
    }
25
}
26

27
.blubb-1 {
28
    rotate: 250deg;
29
    &::after {
30
        transform-origin: 37px 37px;
31
        animation: rotate 2.6s ease-in-out infinite;
32
    }
33
}
34

35
.blubb-2 {
36
    rotate: 150deg;
37
    &::after {
38
        transform-origin: 34px 34px;
39
        animation: rotate 2.8s ease-in-out infinite;
40
    }
41
}
42

43
.blubb-3 {
44
    rotate: 150deg;
45
    &::after {
46
        transform-origin: 31px 31px;
47
        animation: rotate 2.9s ease-in-out infinite;
48
    }
49
}
50

51
.blubb-4 {
52
    rotate: 150deg;
53
    &::after {
54
        transform-origin: 28px 28px;
55
        animation: rotate 3s ease-in-out infinite;
56
    }
57
}
58

59
.blubb-5 {
60
    rotate: 150deg;
61
    &::after {
62
        transform-origin: 25px 25px;
63
        animation: rotate 3.2s ease-in-out infinite;
64
    }
65
}
66

67
.blubb-6 {
68
    rotate: 150deg;
69
    &::after {
70
        transform-origin: 22px 22px;
71
        animation: rotate 3.3s ease-in-out infinite;
72
    }
73
}
74

75
.blubb-7 {
76
    rotate: 150deg;
77
    &::after {
78
        transform-origin: 19px 19px;
79
        animation: rotate 3.4s ease-in-out infinite;
80
    }
81
}
82

83
.blubb-8 {
84
    rotate: 150deg;
85
    &::after {
86
        transform-origin: 16px 16px;
87
        animation: rotate 3.6s ease-in-out infinite;
88
    }
89
}

外部6个球，大小随机边缘小模糊filter: blur(3px);，transform-origin较大超过大圆球，注意设置animation-delay达到不同步效果

1
.sparkle-1,
2
.sparkle-2,
3
.sparkle-3,
4
.sparkle-4,
5
.sparkle-5,
6
.sparkle-6 {
7
    position: absolute;
8
    top: 38px;
9
    left: 38px;
10

11
    &::after {
12
        position: absolute;
13
        display: block;
14
        content: "";
15
        background-color: #fff;
16
        border-radius: 50%;
17
        filter: blur(3px);
18
    }
19
}
20

21
.sparkle-1 {
22
    width: 8px;
23
    height: 8px;
24
    transform: rotate(260deg);
25

26
    &::after {
27
        width: 8px;
28
        height: 8px;
29
        transform-origin: 58px 58px;
30
        animation: rotate 3.6s ease-in-out infinite;
31
        animation-delay: 0.2s;
32
    }
33
}
34

35
.sparkle-2 {
36
    width: 9px;
37
    height: 9px;
38
    transform: rotate(120deg);
39

40
    &::after {
41
        width: 9px;
42
        height: 9px;
43
        transform-origin: 56px 56px;
44
        animation: rotate 3.7s ease-in-out infinite;
45
        animation-delay: 0.4s;
46
    }
47
}
48

49
.sparkle-3 {
50
    width: 13px;
51
    height: 13px;
52
    transform: rotate(96deg);
53

54
    &::after {
55
        width: 13px;
56
        height: 13px;
57
        transform-origin: 55px 55px;
58
        animation: rotate 3.8s ease-in-out infinite;
59
        animation-delay: 0.6s;
60
    }
61
}
62

63
.sparkle-4 {
64
    width: 16px;
65
    height: 16px;
66
    transform: rotate(315deg);
67

68
    &::after {
69
        width: 16px;
70
        height: 16px;
71
        transform-origin: 51px 51px;
72
        animation: rotate 4s ease-in-out infinite;
73
        animation-delay: 0.8s;
74
    }
75
}
76

77
.sparkle-5 {
78
    width: 14px;
79
    height: 14px;
80
    transform: rotate(50deg);
81

82
    &::after {
83
        width: 14px;
84
        height: 14px;
85
        transform-origin: 49px 49px;
86
        animation: rotate 4.1s ease-in-out infinite;
87
        animation-delay: 0.9s;
88
    }
89
}
90

91
.sparkle-6 {
92
    width: 18px;
93
    height: 18px;
94
    transform: rotate(225deg);
95

96
    &::after {
97
        width: 18px;
98
        height: 18px;
99
        transform-origin: 45px 45px;
100
        animation: rotate 3.8s ease-in-out infinite;
101
        animation-delay: 0.3s;
102
    }
103
}
104

105
@keyframes rotate {
106
    from {
107
        transform: rotate(0deg) translate3d(0, 0, 0);
108
    }
109
    to {
110
        transform: rotate(360deg) translate3d(0, 0, 0);
111
    }
112
}

设计简介#

效果展示#

实现代码和步骤#

HTML部分#

CSS部分#

评论区

目录