利用 CSS3 的 filter 属性创建炫酷的视觉效果

CSS3 filter 属性可以创建出各种炫酷的视觉效果。以下是一些示例：

1. 模糊效果

使用 CSS filter 属性中的 blur() 函数可以实现元素的模糊效果。可以通过设置不同的值来调节模糊程度。

.box{
    filter: blur(0px);
    transition: all 1s ease-in-out;
}
.box:hover{
    filter: blur(5px);
}

以上代码会在鼠标悬浮时，将元素进行 5px 的高斯模糊。

2. 反色效果

使用 CSS filter 属性中的 invert() 函数可以实现元素的反色效果。可以通过设置不同的值来调节反色程度。

.box{
    filter: invert(0%);
    transition: all 1s ease-in-out;
}
.box:hover{
    filter: invert(100%);
}

以上代码会在鼠标悬浮时，将元素进行反色处理。

3. 饱和度调节

使用 CSS filter 属性中的 saturate() 函数可以调节元素的饱和度。可以通过设置不同的值来调节饱和度程度。

.box{
    filter: saturate(100%);
    transition: all 1s ease-in-out;
}
.box:hover{
    filter: saturate(0%);
}

以上代码会在鼠标悬浮时，将元素的饱和度调整为 0。

4. 色相旋转

使用 CSS filter 属性中的 hue-rotate() 函数可以对元素进行色相旋转。可以通过设置不同的值来调节旋转程度。

.box{
    filter: hue-rotate(0deg);
    transition: all 1s ease-in-out;
}
.box:hover{
    filter: hue-rotate(180deg);
}

以上代码会在鼠标悬浮时，将元素进行色相旋转 180 度。

5. 透明度调节

使用 CSS filter 属性中的 opacity() 函数可以调节元素的透明度。可以通过设置不同的值来调节透明度程度。

.box{
    filter: opacity(1);
    transition: all 1s ease-in-out;
}
.box:hover{
    filter: opacity(0.5);
}

以上代码会在鼠标悬浮时，将元素的透明度调整为 0.5。