@Filter

.为元素添加滤镜效果

.多个滤镜，请用空格分隔

.多尝试，找到合适的效果

原图如下

1. blur()

.模糊滤镜；模糊导致元素的发散会影响到周边其他元素；但是实际尺寸没有变化

filter:blur(px)

[] 发光效果

2. drop-shadow()

.投影滤镜：部分浏览器不支持第4个参数；如果添加，则不会呈现

.同box-shadow不同的是，drop-shadow只为内容设置阴影，padding会被过滤掉

.drop-shadow会破坏3D变换

filter:drop-shadow(h-shadow v-shadow blur [spread] color)

.多个投影使用空格分开；不是逗号,

 filter: drop-shadow() drop-shadow() drop-shadow();

[] 比较 box-shadow 和 drop-shadow

早安中国

.bs {
    box-shadow: 0 0 1px #000;
}

早安中国

.ds {
    filter: drop-shadow(0 0 1px #000);
}

[] 气泡对话框 - 伪元素叠拼

3. grayscale()

.将图像转换为灰阶：0%为原图；100%为全灰

.特殊时期，各大门户网站使用灰度表达敬意

filter:grayscale(%)

[] 工作经历

4. hue-rotate()

.在图像上应用色相旋转。该值定义色环的度数deg，也可以使用turn。默认值为0deg，代表原始图像

filter: hue-rotate(deg)

[] 霓虹灯

.多重文本阴影 text-shadow 叠加

早安中国

.hue {
  color: #fff;
  font-size: 60px;
  letter-spacing: 4px;
  text-align: center;
  text-transform: uppercase;
  text-shadow:
    0 0 10px #089,
    0 0 20px #089,
    0 0 40px #089,
    0 0 80px #089,
    0 0 160px #089;
  animation: hue 2s linear alternate infinite;
}

@keyframes hue {
  to {
    filter: hue-rotate(360deg);
  }
}

[] 类重用

.先定义好一个button，然后利用hue-rotate创造出其他同款的button

.primary {
    border: none;
    outline: none;
    width: 100px;
    height: 40px;
    color: #fff;
    background-color: #f40;
    border-radius: 10px;
}

.hue1 {
    filter: hue-rotate(0.1turn);
}

.hue2 {
    filter: hue-rotate(0.3turn);
}

.hue3 {
    filter: hue-rotate(0.5turn);
}

.hue4 {
    filter: hue-rotate(0.7turn);
}

.hue5 {
    filter: hue-rotate(0.9turn);
}

5. brightness(%)

.如果没有设定值，默认是1

.如果值是0%，图像会全黑

.值是100%，则图像无变化

.超过100%，图像会比原来更亮

[] 模拟白天、黑夜

6. contrast

对比度

调整图像的亮度；如果为0，则为灰度，rgb都是128

案例 Cases

[] 查看原图-img

.利用img元素分别放置相同的图片；底层放灰图；上层放彩图

.使用定位使2层图片重叠

.通过input拖动使上层图片的裁剪变化，显示出下面的灰片，实现黑白到彩色的渐变

[HTML]：使用了自定义属性--slider接受input的变化，来反映input的拖动

<div class="slider">
    <input id='slider' class="range" type="range">
    <img class="slider-down" src="../utils/view/view0.jpg" alt="">
    <img id="tar" class="slider-up" src="../utils/view/view0.jpg" style="--slider:50" alt="">
</div>

.slider-down {
    filter: grayscale(100%);
}
.slider-up {
    clip-path: inset(0 0 0 calc(var(--slider)*1%));
}

let slider = document.querySelector('#slider')
let tar = document.querySelector('#tar')
slider.addEventListener('input', function () {
    tar.style.setProperty('--slider', this.value)
})

[] 查看原图-伪元素

.利用伪元素实现

.hover触发

[HTML]：显然伪元素的结构更为精简

<div class="slider slider-pre"></div>

.slider-pre {
    position: relative;
    width: 320px;
    height: 180px;
    margin: 2rem auto;
}

.slider-pre::before, .slider-pre::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: url(../utils/view/view0.jpg);
}

.slider-pre::before {
    filter: grayscale(100%);
}

.slider-pre::after {
    clip-path: inset(0 100% 0 0);
    transition: 5s;
}

.slider-pre:hover::after {
    clip-path: inset(0 0 0 0);
}

[] 水滴筹 - 子元素使用模糊 blur() 外扩；父元素使用对比增强 contrast() 内收；使用帧动画 - animation 辅助；其它工具 fancy-border-radius

更多效果，请访问水滴 - drops

背景过滤 backdrop-filter

说明

.为一个元素后面区域添加图形效果（如模糊或颜色偏移）

.适用于元素背后所有元素

.为了看到效果，前面元素应无背景或背景透明；如果是实心背景，就看不到下面背景的毛玻璃效果

.应用：苹果UI、广告等毛玻璃效果、登录表单背景

[] 毛玻璃

.glass-box {
    background-image: url(./imgs/1.png);
    background-size: cover;
}

.glass {
    width: 60%;
    height: 100%;
    background-image: linear-gradient(to bottom right, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1));
    backdrop-filter: blur(1rem);
}