css3中的滤镜特效

朱雀 2022-06-05 09:46 403阅读 0赞

页面被渲染后再页面中某个局部呈现的一些特殊的视觉效果。  
先放一张原图：  
![原图][SouthEast]

1.  grayscale滤镜（灰度滤镜）

<style> .grayscale { filter: grayscale(50%); -webkit-filter: grayscale(50%); } </style>
    <h3>grayscale（灰度滤镜）：</h3>
    <div class="grayscale"></div>

![grayscale][]  
2. sepia滤镜（棕色调）

<style> .sepia { filter: sepia(50%); -webkit-filter: sepia(50%); } </style>
    <h3>sepia（棕色调）:</h3>
    <div class="sepia"></div>

![sepia][]

3.hue-rotate:非常特殊的一个滤镜，将颜色光谱想象成一个由红色到紫色的圆，该滤镜是将图片的颜色沿光环旋转一个角度。

<style> .hue-rotate{ filter: hue-rotate(90deg); -webkit-filter:hue-rotate(90deg); } </style>
    <h3>hue-rotate:</h3>
    <div class="hue-rotate"></div>

![hue-rotate][]  
4. saturate(饱和度滤镜)

<style> .saturate{ filter: saturate(50%); -webkit-filter:saturate(50%); } </style>
    <h3>saturate(饱和度滤镜):</h3>
    <div class="saturate"></div>

![saturate][]  
5. invert（颜色翻转滤镜）

<style> .invert{ filter: invert(50%); -webkit-filter:invert(10%); } </style>
    <h3>invert（颜色翻转滤镜）:</h3>
    <div class="invert"></div>

![invert][]  
6. opacity（透明度滤镜）

<style> .opacity{ filter: opacity(50%); -webkit-filter:opacity(50%); } </style>
    <h3>opacity（透明度滤镜）:</h3>
    <div class="opacity"></div>

![opacity][]  
7.contrast（对比的滤镜）

<style> .contrast{ filter: contrast(50%); -webkit-filter:contrast(50%); } </style>
     <h3>contrast（对比的滤镜）:</h3>
     <div class="contrast"></div>

![contrast][]  
8.blur（模糊滤镜）

<style> .blur{ filter: blur(5px); -webkit-filter:blur(5px); } </style>
     <h3>blur（模糊滤镜）：</h3>
     <div class="blur"></div>

![blue][]  
9.drop-shadow（阴影滤镜）

<style> .drop-shadow{ filter: drop-shadow(4px -4px 6px purple); -webkit-filter:drop-shadow(4px -4px 6px purple); } </style>
    
     <h3>drop-shadow（阴影滤镜）:</h3>
     <div class="drop-shadow"></div>

![drop-shadow][]

[SouthEast]: /images/20220605/d5ae0e94fac543c8a375efd673d8cdd6.png
[grayscale]: /images/20220605/fd1ab36663cc4d2b87065bc9fecf11d3.png
[sepia]: /images/20220605/1bc10987f1fa4cdf845fd3919f354b11.png
[hue-rotate]: /images/20220605/7ce951b2cafc48949c9e2699b592c67c.png
[saturate]: /images/20220605/b02462d9c36b4721966ab573669a9c8d.png
[invert]: /images/20220605/f83b4c563a674111863c01e2f28b298e.png
[opacity]: /images/20220605/0de12da081834a47a254dc42c5f43a98.png
[contrast]: /images/20220605/d82cf9a3f3b24b8285aa76762e2b9758.png
[blue]: /images/20220605/a19faebca6db4bb8a06d5702ae167853.png
[drop-shadow]: /images/20220605/c750a2c292f94e04a0a4a3e9e503f4f2.png

发表评论取消回复

表情：

评论列表（有 0 条评论，403人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS滤镜filter，让页面加上滤镜效果

1、概念 filters是CSS3里新增的一种神奇的功能，一般我们提及滤镜，就会想到使用PhotoShop制作的图片，但是使用CSS滤镜不需要任何作图软件，仅使用CSS就会

小鱼儿/ 2023年10月07日 20:12/ 0 赞/ 89 阅读

相关 css filter 滤镜

filter 注：filter 属性目前已经完全可以在实际项目中应用，只要你的项目不需要兼容IE和Edge，例如中后台和内部系统，移动端项目等，可以放心使用。 ![C

川长思鸟来/ 2023年02月14日 05:59/ 0 赞/ 289 阅读

相关 css3中的滤镜效果

[链接][Link 1] [CSS3 Filter的十种特效][CSS3 Filter] [Link 1]: http://www.r

女爷i/ 2022年07月14日 01:00/ 0 赞/ 254 阅读

相关 css3中的滤镜特效

页面被渲染后再页面中某个局部呈现的一些特殊的视觉效果。先放一张原图： ![原图][SouthEast] 1. grayscale滤镜（灰度滤镜） <st

朱雀/ 2022年06月05日 09:46/ 0 赞/ 404 阅读

相关 CSS3 transform 旋转、偏移、缩放属性，CSS3 filter 滤镜，实现图像特效

目录 CSS3 transform 属性 rotate 2D 旋转 translate 2D 偏移 scale 2D 缩放 skew 2D 倾斜 CSS3 filt

喜欢ヅ旅行/ 2022年05月12日 16:56/ 0 赞/ 487 阅读

相关灰色CSS滤镜 grayscale

灰色CSS滤镜加入一个CSS滤镜即可 <style type="text/css"> /\可以body改为需要的标签\/ body\{ filter

ゝ一纸荒年。/ 2022年01月10日 13:27/ 0 赞/ 1114 阅读

相关 CSS3中强大的filter(滤镜)属性

1定义　　　　　　filter，从字面意思来看就是滤镜，官方定义filter属性定义了元素(通常是<img>)的可视效果(例如：模糊与饱和度)；举个栗子： !

Dear 丶/ 2021年11月13日 22:36/ 0 赞/ 392 阅读

相关 css 滤镜之Gradient

CreateTime--2017年12月26日11:09:14 Author:Marydon ie滤镜特效之Gradient 作用：　　用于设置渐变背景色使

喜欢ヅ旅行/ 2021年09月17日 15:10/ 0 赞/ 388 阅读

相关 css 滤镜属性

CSS3中强大的filter(滤镜)属性博主最近在做网站的过程中发现了一个非常强大的CSS3属性，就是filter(滤镜)属性，喜欢p图的朋友看名字都应该知道这是什么神器了

布满荆棘的人生/ 2021年07月24日 12:13/ 0 赞/ 671 阅读

相关 Python: PS 滤镜特效 -- Marble Filter

本文用 Python 实现 PS 滤镜特效，Marble Filter, 这种滤镜使图像产生不规则的扭曲，看起来像某种玻璃条纹，具体的代码如下: import num...

小灰灰/ 2021年01月12日 03:32/ 0 赞/ 609 阅读