【CSS3】CSS3 滤镜实现

简介:

 IE特有的滤镜常常作为CSS3各种新特性的降级处理补充,而Adobe转向HTML5后与Chrome合作推出CSS3的Filter特性,因此当前仅Webkit内核的浏览器支持CSS3 Filter,而FF和IE10+则需要使用SVG滤镜(svg effects for html)或Canvas作为替代方案处理了,而IE5.5~9则使用IE滤镜、JS+DIV或VML处理!

本篇只做CSS3的滤镜实现,其他具体可以查看来源文章

CSS3 Filter兼容性表如下:

 

滤镜实现效果图:

PC显示:

手机显示:

相关代码:

1.HTML 代码

复制代码
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta content="width=device-width,user-scalable=no" name="viewport" />
    <link href="/images/web_mini.ico" type="image/x-icon" rel="shortcut icon" />
    <title>CSS3 滤镜实现</title>
    <link href="css/20160110.css" rel="stylesheet" />
</head>
<body>
    <div style="display: table; text-align: center; width: 100%; height: 100%;">
        <div style="display: table-cell; vertical-align: middle;">
            <div class="div_20160110">
                <img src="img/img_20160110.jpg" class="" alt="原图" title="原图" />
                <img src="img/img_20160110.jpg" class="sepia " alt="Speia滤镜" title="Speia滤镜" />
                <img src="img/img_20160110.jpg" class="grayscale " alt="灰度图滤镜" title="灰度图滤镜" />
                <img src="img/img_20160110.jpg" class="blur " alt="高斯模糊滤镜" title="高斯模糊滤镜" />
                <img src="img/img_20160110.jpg" class="invert " alt="反色滤镜" title="反色滤镜" />
                <img src="img/img_20160110.jpg" class="saturate " alt="饱和度滤镜" title="饱和度滤镜" />
                <img src="img/img_20160110.jpg" class="contrast " alt="对比度滤镜" title="对比度滤镜" />
                <img src="img/img_20160110.jpg" class="brightness " alt="亮度滤镜" title="亮度滤镜" />
                <img src="img/img_20160110.jpg" class="hue-rotate " alt="色相旋转滤镜" title="色相旋转滤镜" />
                <img src="img/img_20160110.jpg" class="drop-shadow " alt="阴影滤镜" title="阴影滤镜" />
            </div>
        </div>
    </div>
</body>
</html>
复制代码

 

2.CSS 代码

复制代码
.div_20160110 img {
    max-width: 150px;
    max-height: 150px;
}

.sepia { /**  格式,filer: sepia(效果范围)
     *  效果范围,取值范围为0-1或0-100%;0表示无效果,1或100%表示最大效果
     */
    -webkit-filter: sepia(100%);
    -moz-filter: sepia(100%);
    -o-filter: sepia(100%);
    -ms-filter: sepia(100%);
    filter: sepia(100%);
}

.grayscale { /**  格式,filer: grayscale(效果范围)
     *  效果范围,取值范围为0-1或0-100%;0表示无效果,1或100%表示最大效果
     */
    -webkit-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    filter: grayscale(100%);
}

.blur { /**  格式,filer: blur(模糊半径)
     *  模糊半径,取值范围0~Npx,0为无效果
     */
    -webkit-filter: blur(2px);
    -moz-filter: blur(2px);
    -o-filter: blur(2px);
    -ms-filter: blur(2px);
    filter: blur(2px);
}

.invert { /**  格式,filer: invert(效果范围)
     *  效果范围,取值范围0~1或0~100%,0为无效果,1或100%表示最大效果
     */
    -webkit-filter: invert(1);
    -moz-filter: invert(1);
    -o-filter: invert(1);
    -ms-filter: invert(1);
    filter: invert(1);
}

.saturate { /**  格式,filer: saturate(效果范围)
     *  效果范围,取值范围>=0的数字或百分数,1为无效果,0为灰度图
     */
    -webkit-filter: saturate(2);
    -moz-filter: saturate(2);
    -o-filter: saturate(2);
    -ms-filter: saturate(2);
    filter: saturate(2);
}

.contrast { /**  格式,filer: contrast(效果范围)
     *  效果范围,取值范围>=0的数字或百分数,1为无效果
     */
    -webkit-filter: contrast(2);
    -moz-filter: contrast(2);
    -o-filter: contrast(2);
    -ms-filter: contrast(2);
    filter: contrast(2);
}

.brightness { /**  格式,filer: brightness(效果范围)
     *  效果范围,取值范围>=0的数字或百分数,1为无效果
     */
    -webkit-filter: brightness(2);
    -moz-filter: brightness(2);
    -o-filter: brightness(2);
    -ms-filter: brightness(2);
    filter: brightness(2);
}

.hue-rotate { /**  格式,filer: hue-rotate(效果范围)
     *  效果范围,取值范0deg~365deg,0(默认值)为无效果
     */
    -webkit-filter: hue-rotate(200deg);
    -moz-filter: hue-rotate(200deg);
    -o-filter: hue-rotate(200deg);
    -ms-filter: hue-rotate(200deg);
    filter: hue-rotate(200deg);
}

.drop-shadow { /**  格式,filer: drop-shadow(x-offset y-offset 阴影模糊半径 阴影颜色)
     *  x-offset和y-offset为阴影的相对于元素左上角的位移距离;
     * 注意:
     *     1. 阴影的外观受border-radius样式的影响;
     *     2. :after和:before等伪元素会继承阴影的效果。
     */
    -webkit-filter: drop-shadow(1px 1px 0px #333);
    -moz-filter: drop-shadow(1px 1px 0px #333);
    -o-filter: drop-shadow(1px 1px 0px #333);
    -ms-filter: drop-shadow(1px 1px 0px #333);
    filter: drop-shadow(1px 1px 0px #333); /*圆角*/
    border: solid 2px #e00;
    -webkit-border-radius: 1px;
}





本文转自叶超Luka博客园博客,原文链接:http://www.cnblogs.com/yc-755909659/p/5118389.html,如需转载请自行联系原作者
目录
相关文章
|
1月前
|
前端开发
CSS圆角大杀器,使用滤镜构建圆角及波浪效果
CSS圆角大杀器,使用滤镜构建圆角及波浪效果
22 0
|
2月前
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——5、DIV+CSS百分比布局
H5+CSS3+JS逆向前置——5、DIV+CSS百分比布局
37 0
|
2月前
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——4、DIV+CSS绘制旗帜练习
H5+CSS3+JS逆向前置——4、DIV+CSS绘制旗帜练习
19 0
|
2月前
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——CSS3、基础样式表
H5+CSS3+JS逆向前置——CSS3、基础样式表
38 0
|
3月前
|
Web App开发 移动开发 前端开发
【CSS】<Cascading Style Sheets>CSS3常用样式属性
【1月更文挑战第22天】【CSS】<Cascading Style Sheets>CSS3常用样式属性
|
8月前
|
存储 前端开发 安全
CSS
什么是 CSS? CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题 外部样式表可以极大提高工作效率 外部样式表通常存储在 CSS 文件中 多个样式定义可层叠为一个
92 0
|
7月前
|
前端开发
特殊日期将网站变成灰色-css滤镜(整理)
特殊日期将网站变成灰色-css滤镜(整理)
|
8月前
css3 text文本超出单行溢出省略和 css3文本超出两行溢出省略
css3 text文本超出单行溢出省略和 css3文本超出两行溢出省略
41 0
|
9月前
|
前端开发 容器
CSS3 属性选择器 伪类选择器 盒模型 圆角 阴影 CSS定位和浮动
CSS3 属性选择器 伪类选择器 盒模型 圆角 阴影 CSS定位和浮动
|
Web App开发 JavaScript 前端开发
tiltShift.js - CSS3 滤镜实现移轴镜头效果
  tiltShift.js 是一款很棒的 jQuery 插件,使用 CSS3 图片滤镜来实现照片的移轴镜头效果。使用非常简单,使用 data 属性配置参数。温馨提示:为保证最佳的效果,请在 IE10+、Chrome、Firefox 和 Safari 等现代浏览器中浏览。
1314 0