css3滤镜

最新推荐文章于 2024-10-02 01:29:58 发布

code~he

最新推荐文章于 2024-10-02 01:29:58 发布

阅读量177

点赞数

分类专栏：笔记文章标签： css3

本文链接：https://blog.csdn.net/qq_44421547/article/details/105034523

版权

笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

实现CSS 3中的滤镜特效

① 了解滤镜特效

1) 滤镜特效是指在页面被渲染之后在页面中某个局部呈现的一些特殊的视觉效果
2)滤镜特效来源于SVG（Scalable Vector Graphics，可缩放矢量图形）标准
3)在SVG中，使用一个内置各种滤镜特效的元素来实现滤镜特效，在CSS 3中，使用一个图形模型来定义滤镜，开发者可直接使用样式代码来实现滤镜

② 实现滤镜特效（-webkit-/-moz）（左边为原图）

属性：filter
属性值
a)grayscale滤镜（灰度滤镜）

该滤镜将彩色图像转换为灰度图像。样式属性值中使用一个数值或数值百分比作为参数，该参数用于控制图像灰度。如果值为100%，则图像变为黑白图像，如果该值为0%，则图像不做任何修改，仍然为彩色图像。可以使用浮点数作为属性值，0代表0%，1代表100%

div:nth-child(1),
div:nth-child(2){
    width:200px;
    height:200px;
    background-image:url(../img/5.jpg);
    background-size:50px;
    background-repeat:round;
    display:inline-block;
}
div:nth-child(2){
    filter:grayscale(0.5); 
    -webkit-filter:grayscale(0.5);
    -moz-filter:grayscale(0.5); 
}

在这里插入图片描述

b) sepia滤镜

该滤镜为彩色图像添加一层棕褐色色调，使其呈现出老照片的效果。样式属性中使用一个数值或数值百分比作为参数，该参数用于控制棕褐色调的浓度。如果值为100%，则图像呈现出黑白色老照片的效果，如果该值为0%，则图像不做任何修改，仍然为彩色图像。可以使用浮点数作为属性值，0代表0%，1代表100%

div:nth-child(1),
div:nth-child(2){
    width:200px;
    height:200px;
    background-image:url(../img/4.jpg);
    background-size:20px;
    background-repeat:round;
    display:inline-block;
}
div:nth-child(2){
    filter:sepia(0.5); 
    -webkit-filter:sepia(0.5);
    -moz-filter:sepia(0.5); 
}

在这里插入图片描述

c)saturate滤镜（饱和度滤镜）

该滤镜用于增强彩色图像的饱和度，使色彩变得更加鲜明。该滤镜可以使照片呈现海报或卡通效果。样式属性中可以使用一个大于100%的百分比作为参数来增强色彩的饱和度，也可以使用一个小于100%的百分比作为参数来削弱色彩的饱和度。

div:nth-child(1),
div:nth-child(2){
    width:200px;
    height:200px;
    background-image:url(../img/7.jpg);
    background-size:50px;
    background-repeat:round;
    display:inline-block;
}
div:nth-child(2){
    filter:saturate(200%); 
    -webkit-filter:saturate(200%);
    -moz-filter:saturate(200%); 
}

在这里插入图片描述

d)hue-rotate滤镜

该滤镜是一个非常特殊的滤镜，可以用于产生特殊的视觉效果。请将颜色光谱设想为一个从红色到紫色的一个颜色环（在光学中，为对光的色学性质研究方便，将所有可见颜色光谱围成一个圆环，称之为颜色环），该滤镜将图像中的所有颜色沿光环旋转一个角度。样式属性中使用一个角度值（例如90deg）为参数，参数值代表图像颜色沿颜色环旋转的角度

div:nth-child(1),
div:nth-child(2){
    width:200px;
    height:200px;
    background-image:url(../img/7.jpg);
    background-size:50px;
    background-repeat:round;
    display:inline-block;
}
div:nth-child(2){
    filter:hue-rotate(-80deg); 
    -webkit-filter:hue-rotate(-80deg);
    -moz-filter:hue-rotate(-80deg); 
}

在这里插入图片描述
e)invert滤镜（颜色翻转滤镜）

该滤镜将图像颜色翻转，样式属性使用一个百分比数值作为参数，用于定义图像颜色的翻转程度，当参数值为100%时的作用相当于为一幅照片进行反相处理

div:nth-child(1),
div:nth-child(2){
    width:200px;
    height:200px;
    background-image:url(../img/7.jpg);
    background-size:50px;
    background-repeat:round;
    display:inline-block;
}
div:nth-child(2){
    filter:invert(0.7); 
    -webkit-filter:invert(0.7);
    -moz-filter:invert(0.7); 
}

在这里插入图片描述
f)opacity滤镜（透明度滤镜）

该滤镜为图像产生透明或半透明效果。样式属性使用一个百分比数值或浮点数作为参数，用于定义图像的透明度，当参数值为100%时图像为完全不透明，即不对图像进行修改。当参数值越小时透明度越高，这当然意味着被使用滤镜的元素叠放在其他元素上时其他元素将变得越来越清晰。当参数值降为0时被使用滤镜的元素变为完全透明（即完全消失），但仍可捕捉到该元素的诸如被鼠标单击等事件。因此，该滤镜的作用与opacity样式属性的作用相同。但是opacity属性不具有硬件加速特性，而在某些浏览器中当使用opacity滤镜时将利用硬件加速特性，因而拥有更高的页面性能

div:nth-child(1),
div:nth-child(2){
    width:200px;
    height:200px;
    background-image:url(../img/7.jpg);
    background-size:50px;
    background-repeat:round;
    display:inline-block;
}
div:nth-child(2){
    filter:opacity(0.5); 
    -webkit-filter:opacity(0.5);
    -moz-filter:opacity(0.5); 
}

在这里插入图片描述
g)contrast滤镜（对比度滤镜）

就像控制电视机上的亮度一样，该滤镜可以在全黑与原图像亮度之间调整图像的对比度。样式属性使用一个百分比数值或浮点数作为参数，用于定义图像的对比度，当参数值为0%时图像为全黑效果，当参数值在0%增长到100%的过程中，图像对比度将变得越来越强，当参数值为100%时图像对比度变为原图像对比度。该参数值可以大于100%，当参数值为200%时图像对比度为原图像对比度的2倍

div:nth-child(1),
div:nth-child(2){
    width:200px;
    height:200px;
    background-image:url(../img/3.jpg);
    background-size:50px;
    background-repeat:round;
    display:inline-block;
}
div:nth-child(2){
    filter:contrast(300%); 
    -webkit-filter:contrast(300%);
    -moz-filter:contrast(300%); 
}

在这里插入图片描述
h)blur滤镜（模糊滤镜）

该滤镜的作用类似于在图像上添加一层玻璃遮罩，使图像具有一种烟雾效果。样式属性使用一个带有像素值单位的整数值，用于指定图像的模糊度。参数值为0时图像不发生变化

div:nth-child(1),
div:nth-child(2){
    width:200px;
    height:200px;
    background-image:url(../img/7.jpg);
    background-size:50px;
    background-repeat:round;
    display:inline-block;
}
div:nth-child(2){
    filter:blur(5px); 
    -webkit-filter:blur(5px);
    -moz-filter:blur(5px); 
}

在这里插入图片描述
i)drop-shadow滤镜（阴影滤镜）

该滤镜的作用是为图像添加一层阴影效果，就好像太阳照在图像上使其产生一个影子一样。该滤镜为原图像产生一个快照，使其颜色单一化并将之模糊，然后将模糊结果进行偏离，使其看起来就像原图像的一个阴影。样式属性中使用多个可选参数，分别用于指定阴影的横方向偏移距离、纵方向偏移距离、阴影的模糊半径以及阴影的颜色

div:nth-child(1),
div:nth-child(2){
    width:200px;
    height:200px;
    background-image:url(../img/7.jpg);
    background-size:50px;
    background-repeat:round;
    display:inline-block;
}
div:nth-child(2){
    filter:drop-shadow(5px 5px 2px rgb(75, 189, 235)); 
    -webkit-filter:drop-shadow(5px 5px 2px rgb(75, 189, 235));
    -moz-filter:drop-shadow(5px 5px 2px rgb(75, 189, 235)); 
}

在这里插入图片描述