CSS滤镜filter

基本属性

filter:blur(5px)  //模糊
filter:brightness(1.4) //亮度
filter:contrast(200%) //对比度
filter:drop-shadow(4px 4px 8px blue) //投影
filter:grayscale(50%) //灰度
filter:hue-rotate(90deg) //色调变化
filter:invert(75%) //反相
filter:opacity(25%) //透明度
filter:saturate(230%) //饱和度
filter:sepia(60%) //褐色

局部模糊，径向模糊

<div class="box-blur">
    <img src="./example.jpg" class="radial-blur">
    <img src="./example.jpg">
</div>

.box-blur {
    width: 256px; height: 192px;
    position: relative;
    overflow: hidden;
}
.radial-blur {
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    filter: blur(20px);
    mask-image: radial-gradient(transparent, transparent 10%, black 60%);
    transform: scale(1.2);
}

局部模糊

<div class="box-blur">
    <img src="./example.jpg" class="local-blur">
    <img src="./example.jpg">
</div>

.box-blur {
    width: 256px; height: 192px;
    position: relative;
    overflow: hidden;
}
.radial-blur {
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    filter: blur(12px);
    mask: no-repeat center;
    mask-image: linear-gradient(black, black), linear-gradient(black, black);
    mask-size: cover, 60px 60px;
    mask-composite: exclude;
    mask-composite: source-out;
    transform: scale(1.1);
}

色彩动画

<div class="flow-colorful"></div>

.flow-colorful {
    max-width: 600px;
    height: 150px;
    background: linear-gradient(to right, red, orange, yellow, green, cyan, blue, purple);
    animation: hue 6s linear infinite;
}
@keyframes hue {
    from { filter: hue-rotate(0deg); }
    to { filter: hue-rotate(360deg); }
}

文字动效

<h2 class="flow-slogon">滤镜制作文字渐变</h2>

.flow-slogon {
    font-size: 100px;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(to right, red, yellow, lime, aqua, blue, fuchsia);
    animation: hue 6s linear infinite;
}

# CSS