前言
在处理图片时，若想让一张图像呈现各种不同的视觉效果，可使用CSS中的filter属性，可为元素指定各种滤镜效果，比如模糊、灰度、明暗度、颜色偏移等。
CSS filter的基础使用非常简单可参照官网，也可以通过指定这些函数的值来实现想要的效果，如下：
/*使用单个滤镜 */
filter: blur(5px); // 高斯模糊
filter: brightness(0.4); // 变得明亮，值为 0% 将创建全黑图像
filter: contrast(200%); // 图像的对比度，值是 0% 的话，图像会全黑
filter: drop-shadow(16px 16px 20px blue); // 图像阴影效果
filter: grayscale(50%); // 图像灰度
filter: hue-rotate(90deg); // 色相旋转
filter: invert(75%); // 反转图像
filter: opacity(25%); // 透明度
filter: saturate(30%); // 图像饱和度
filter: sepia(60%); // 转换为深褐色
/* 多个滤镜 */
filter: contrast(175%) brightness(3%);
/* 不使用滤镜 */
filter: none;
模糊效果
假定情景：有三张默认全部清晰显示的图片，鼠标hover时，其余两张模糊，当前的清晰显示，实现如下:
1659927608986.png
html 代码
这是第一张
这是第二张
这是第三张
css 代码
div {
display: flex;
width: 660px;
margin: 100px auto;
padding: 30px 30px 20px;
justify-content: space-between;
background: #f2f2f2;
p {
position: relative;
height: 180px;
width: 180px;
span {
position: absolute;
left: 52px;
bottom: 30px;
font-weight: 700;
z-index: 1;
}
}
}
实现思路：是将背景加在
p元素的伪类上，当元素不是焦点时，为该元素的伪类加上滤镜
div {
display: flex;
width: 660px;
margin: 100px auto;
padding: 30px 30px 20px;
justify-content: space-between;
background: #f2f2f2;
p {
position: relative;
height: 180px;
width: 180px;
span {
position: absolute;
left: 52px;
bottom: 30px;
font-weight: 700;
z-index: 1;
}
&::before {
z-index: 1;
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
border-radius: 20px;
filter: blur(0px) opacity(1);
transition: filter 200ms linear, transform 200ms linear;
background: url(./assets/logo.png);
background-size: 100% 100%;
}
}
}
注意：这里不能将滤镜直接加在
p元素上而是其伪类上。因为父元素加了滤镜，它的子元素都会一起由该滤镜改变，会导致上面的文字也变模糊。
增加hover模糊效果：通过css选择器选出非hover的p元素，给其伪类添加模糊、透明度和明暗度的滤镜
div {
display: flex;
width: 660px;
margin: 100px auto;
padding: 30px 30px 20px;
justify-content: space-between;
background: #f2f2f2;
p {
position: relative;
height: 180px;
width: 180px;
span {
position: absolute;
left: 52px;
bottom: 30px;
font-weight: 700;
z-index: 1;
}
&::before {
z-index: 1;
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
border-radius: 20px;
filter: blur(0px) opacity(1);
transition: filter 200ms linear, transform 200ms linear;
background: url(./assets/logo.png);
background-size: 100% 100%;
}
&:hover:before {
filter: saturate(1.2);
transform: scale(1.05);
}
}
&:hover > p:not(:hover):before {
filter: blur(5px) opacity(0.6) brightness(0.8);
}
}
效果如下：
1659929463168.png
褪色效果
实现思路：通过sepia滤镜将图像基调转换为深褐色，再通过降低 饱和度saturate和 色相旋转hue-rotate微调，模拟老照片的效果，代码如下：
p {
position: relative;
height: 180px;
width: 180px;
filter: sepia(30%) saturate(40%) hue-rotate(5deg);
transition: transform 0.5s;
span {
position: absolute;
left: 52px;
bottom: 30px;
font-weight: 700;
z-index: 1;
}
&::before {
z-index: 1;
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
border-radius: 20px;
filter: blur(0px) opacity(1);
transition: filter 200ms linear, transform 200ms linear;
background: url(./assets/logo.png);
background-size: 100% 100%;
}
&:hover {
filter: none;
transform: scale(1.2) translateX(10px);
z-index: 1;
}
}
灰度效果
grayscale() 函数将改变输入图像灰度。amount 的值定义了转换的比例。值为 100% 则完全转为灰度图像，值为 0% 图像无变化。值在 0% 到 100% 之间，则是效果的线性乘数。若未设置值，默认是 0。
实现思路：在html上加上filter: grayscale(100%)如下：
html{
filter: grayscale(100%);
}
1659930673466.png
电影效果
brightness()函数将线性乘法器应用于输入图像，使其看起来或多或少地变得明亮。值为 0% 将创建全黑图像。值为 100% 会使输入保持不变。其他值是效果的线性乘数。如果值大于 100% 提供更明亮的结果。若没有设置值，默认为 1。
实现思路：通过调整背景图的明暗度和文字的透明度来模拟电影谢幕的效果，代码如下：
html 代码
这是第一张
这是第二张
这是第三张
css 代码
div {
width: 660px;
height: 200px;
margin: 100px auto;
background: blue;
position: relative;
.box {
position: absolute;
width: 100%;
height: 100%;
animation: fade-away 2.5s linear forwards; //forwards当动画完成后，保持最后一帧的状态
}
.text {
position: absolute;
line-height: 55px;
color: #fff;
font-size: 36px;
text-align: center;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
opacity: 0;
animation: show 2s cubic-bezier(0.74, -0.1, 0.86, 0.83) forwards; // 用到了贝赛尔曲线
}
@keyframes fade-away {
30% {
filter: brightness(1);
}
100% {
filter: brightness(0);
}
}
@keyframes show {
20% {
opacity: 0;
}
100% {
opacity: 1;
}
}
}
融合效果
实现思路：需要用到的滤镜是blur和contrast
html 代码
css 代码
div {
margin: 50px auto;
height: 140px;
width: 400px;
background: #fff; //给融合元素的父元素设置背景色
display: flex;
align-items: center;
justify-content: center;
filter: contrast(30); //给融合元素的父元素设置contrast
div {
border-radius: 50%;
position: absolute;
filter: blur(10px); //给融合元素设置 blur => 高斯模糊
}
.box1 {
height: 90px;
width: 90px;
background: #03a9f4;
transform: translate(-50px);
animation: 2s moving linear infinite alternate-reverse;
}
.box2 {
height: 60px;
width: 60px;
background: #0000ff;
transform: translate(50px);
animation: 2s moving linear infinite alternate;
}
@keyframes moving {
0% {
transform: translate(50px);
}
100% {
transform: translate(-50px);
}
}
}
友情提示：
blur设置图像的模糊程度，contrast设置图像的对比度。当两者像上面那样组合时，就会产生神奇的融合效果
contrast滤镜应用在融合元素的父元素上，且父元素必须设置backgroundblur滤镜应用在融合的子元素上
加载动画
在上述的基础上还可以实现loading动画，如下：
html 代码
.container {
margin: 10px auto;
height: 140px;
width: 300px;
background: #fff; //父元素设置背景色
display: flex;
align-items: center;
filter: contrast(30); //父元素设置contrast
.box {
height: 50px;
width: 60px;
background: #e00606;
border-radius: 50%;
position: absolute;
filter: blur(20px);
transform: scale(0.1);
transform-origin: left top;
}
.box {
animation: move 4s cubic-bezier(0.44, 0.79, 0.83, 0.96) infinite;
}
.box:nth-child(2) {
animation-delay: 0.4s;
}
.box:nth-child(3) {
animation-delay: 0.8s;
}
.box:nth-child(4) {
animation-delay: 1.2s;
}
.box:nth-child(5) {
animation-delay: 1.6s;
}
@keyframes move {
0% {
transform: translateX(10px) scale(0.3);
}
45% {
transform: translateX(135px) scale(0.8);
}
85% {
transform: translateX(270px) scale(0.1);
}
}
}
本人理解的还比较粗浅，希望大神指点一二~~