CSS3 Fliter的十种特效(一)

一、grayscale灰度

使用这个特效,会把图片变成灰色的,如果你在grayscale()中没有任何参数值,将会以默认值“100%”渲染。其效果下图所示:

代码:

#gray{
-webkit-filter:grayscale(1);
}

如果你在grayscale()中设置参数值,将会出现由彩色向黑白两色变化,效果图如下:

代码:

#gray{
-webkit-filter:grayscale(0.5);
}

二、sepia棕色、褐色

使用这个特效,使画面整体泛棕褐色,通常能使图片有种怀旧的感觉。效果图如下:

代码:

#gray{
-webkit-filter:sepia(1);
}

如果你在sepia()中设置参数值,将会出现由彩色向棕褐色变化,效果图如下:

代码:

#gray{
-webkit-filter:sepia(0.7);
}

三、saturate饱和度

使用这个特效,会改变图片的饱和度,其效果下图所示:

代码:

#gray{
-webkit-filter:saturate(5);
}

四、hue-rotate色相旋转

hue-rotate用来改变图片的色相其效果如下图所示:

代码:

#gray{
-webkit-filter:hue-rotate(80deg);
}

五、invert反色

invert做出来的效果就像是我们照相机底片的效果一样,其效果如下图所示:

代码:

#gray{
-webkit-filter:invert(1);
}

改变图片的饱和度

时间: 2024-10-28 19:22:24

CSS3 Fliter的十种特效(一)的相关文章

CSS3 Fliter的十种特效(二)

一.drop-shadow阴影 给图片加阴影效果,效果如下图所示: 代码: #gray{ -webkit-filter:drop-shadow(5px 5px 5px green); } 二.blur模糊 给图片加模糊效果,改变图片清晰度,效果如下图所示: 代码: #gray{-webkit-filter:blur(5px); } 三.contrast对比度 改变图片的对比度,效果如下图所示: 代码: #gray{-webkit-filter:contrast(2); } 四.brightnes

CSS3 Filter的十种特效

发布作者:萧强   发布时间:2015-09-24   阅读次数:3000 最近到处看到有人在说CSS3的filter一直没有时间自己去测试这效果.今天终于抽出时间学习这个CSS3的Filter.不整不知道呀,一整才让我感到吃惊,太强大了.大家先来看个效果吧: 我想光看上面的效果就能吸引你了,要是你自己动手的话,我想您更会感到神奇.细一看,这些效果就像是photoshop整出来的一样,其实是真是这样的,有很多效果都是类似于photoshop中的特效.不过有一点大家需要特别的注意:此处的CSS3

本周推荐7款CSS3实现的动态特效

大家都知道,在网页制作时使用CSS技术,可以有效地对页面的布局.字体.颜色.背景和其它效果实现更加精确的控制.只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和格式.CSS3是CSS技术的升级版本,CSS3语言开发是朝着模块化发展的.本周极客社区本周推荐7款CSS3实现的动态特效.希望对大家有所帮助! 相关阅读: 推荐9款使用CSS3实现的超酷动画效果 10款重量级CSS3的全新特效 CSS3实现的全屏幕覆盖层效果 在线演示 一个使用CSS3生成的超酷幻灯

6种炫酷的CSS3按钮边框动画特效

这是一款效果非常炫酷的CSS3按钮边框动画特效.这组按钮边框动画共有6种不同的效果.当鼠标滑过按钮的时候,按钮的边框会以不同的方式进行各种动画,效果非常的炫酷. 在线预览   源码下载 使用方法 HTML结构 该CSS3按钮边框动画特效中的按钮使用HTML的<button>元素来制作.各种效果非标设置不同的class.例如第一种效果的class为draw. <button class="draw">draw</button> CSS样式 在CSS样式

jQuery+CSS3文字跑马灯特效

jQuery+CSS3文字跑马灯特效是一款将跑马灯背景制作为3D立方体效果,文字在上面移动时,就像是文字投影到墙壁上,在转角出会改变运动方向. 效果展示 http://hovertree.com/texiao/jquery/83/ 效果图如下: 完整HTML代码如下: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http

一款基于jquery和css3的头像恶搞特效

今天给大家分享一款基于jquery和css3的头像恶搞特效.这款实例中,一个头像在画面中跳舞,头像还有可爱的帽子,单击下面的按钮可以为头像切换不同的帽子.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="wwiaftm-container"> <div class="base wwiaftm"> <div class="body-1 wwiaftm"> <div

CSS3图片圆角+阴影特效

使用CSS3技术编写的图片圆角及阴影特效代码,与一般的图片阴影有些不一样,用CSS直接生成阴影,当然要比使用图片来修饰要好得多,图片的加载可能会影响到网页的加载,CSS就不会哦. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&q

CSS3实现jquery的特效和图片集锦

1.实现放大缩略图(CSS3) 通过使用overflow:visible 效果仅见:http://runjs.cn/detail/exwrb9rn 2.同上的效果 效果仅见:http://runjs.cn/detail/dbitgkfz 3.css3使得鼠标移入图片,其他图片模糊 效果仅见:http://runjs.cn/detail/pgnqjrgh 4.css3实现悬浮小图标 效果仅见:http://runjs.cn/detail/kqvjqdlp 5.css实现仿鱼泡提示框 效果仅见:ht

CSS3+JQUERY页面滚动特效代码

原文:CSS3+JQUERY页面滚动特效代码 源代码下载地址:http://www.zuidaima.com/share/1550463656168448.htm 源码截图: