css3 filter属性的使用简介


Posted in HTML / CSS onMarch 31, 2021

一、前言

在编写前端页面的动画效果时,或多或少会用到 filter 属性,由于其属性值过多,故本篇用于整理和记录其相关资料。

二、介绍

filter属性定义了元素(通常是)的可视效果。

属性值如下:

 

属性值 描述
none 默认值,没有效果。
blur(px) 给图像设置高斯模糊,则默认值是 0。
brightness(%) 给图片应用一种线性乘法,使其看起来更亮或更暗,默认值是 1。
contrast(%) 调整图像的对比度,默认值是 1。
grayscale(%) 将图像转换为灰度图像,默认值是 0。
hue-rotate(deg) 给图像应用色相旋转,默认值是 0deg。
invert(%) 反转输入图像,默认值是 0。
opacity(%) 转化图像的透明程度,默认值是 1。
saturate(%) 转换图像饱和度,默认值是 1。
sepia(%) 将图像转换为深褐色,默认值是 0。

注意:滤镜通常使用百分比 (如:75%), 当然也可以使用小数来表示 (如:0.75)。

三、演示代码

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .container {
            margin: 4rem auto;
            width: 100%;
            height: auto;
            text-align: center;
        }

        .box {
            display: inline-block;
            margin: 1rem;
        }

        .box ul {
            margin: 0;
            padding: 0;
            list-style: none;
            text-align: left;
        }

        .box ul li {
            margin: .25rem 0;
            padding: .25rem;
            cursor: pointer;
        }

        .box ul li:hover {
            background-color: #eee;
        }

        ul li.active {
            background-color: #eee;
        }

       .box img {
            width: 260px;
            height: 260px;
        }

    </style>
</head>
<body>
    <div class="container">
        <h3>点击左侧属性显示效果</h3>
        <div class="box">
            <ul>
                <li data-p="blur(5px)">filter: blur(5px)</li>
                <li data-p="brightness(.5)">filter: brightness(.5)</li>
                <li data-p="contrast(.5)">filter: contrast(.5)</li>
                <li data-p="grayscale(1)">filter: grayscale(1)</li>
                <li data-p="hue-rotate(90deg)">filter: hue-rotate(90deg)</li>
                <li data-p="invert(.4)">filter: invert(.4)</li>
                <li data-p="opacity(.4)">filter: opacity(.4)</li>
                <li data-p="saturate(.5)">filter: saturate(.5)</li>
                <li data-p="sepia(.5)">filter: sepia(.5)</li>
            </ul>
        </div>
        <div class="box">
            <div class="origin">
                <img src="https://tva3.sinaimg.cn/large/87c01ec7gy1frmmmwb3anj21hc0u0b2a.jpg" alt="">
            </div>
            <div>原图</div>
        </div>
        <div class="box">
            <div id="filter">
                <img src="https://tva3.sinaimg.cn/large/87c01ec7gy1frmmmwb3anj21hc0u0b2a.jpg" alt="">
            </div>
            <div id="info">效果图</div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script>
        $(function() {
                let $lis = $("li");
               $lis.on("click", function() {
                    $lis.removeClass("active");
                    let p = $(this).addClass("active").data("p");
                    $("#filter").css({"filter": p});
                    $("#info").text("filter: " + p);
               });
        });
    </script>
</body>
</html>

以上就是css3 filter属性的使用简介的详细内容,更多关于css3 filter属性的资料请关注三水点靠木其它相关文章!

HTML / CSS 相关文章推荐
css3实现背景图片拉伸效果像桌面壁纸一样
Aug 19 HTML / CSS
css3隔行变换色实现示例
Feb 19 HTML / CSS
纯css3实现的动画按钮的实例教程
Nov 17 HTML / CSS
CSS中垂直居中的简单实现方法
Jul 06 HTML / CSS
HTML5边玩边学(2)基础绘图实现方法
Sep 21 HTML / CSS
html5 Canvas绘制线条 closePath()实例代码
May 10 HTML / CSS
html5教程制作简单画板代码分享
Dec 04 HTML / CSS
html5实现微信打飞机游戏
Mar 27 HTML / CSS
HTML5自定义属性前缀data-及dataset的使用方法(html5 新特性)
Aug 24 HTML / CSS
详解快速开发基于 HTML5 网络拓扑图应用
Jan 08 HTML / CSS
h5移动端调用支付宝、微信支付的实现
Jun 08 HTML / CSS
html+css实现文字折叠特效实例
Jun 02 HTML / CSS
使用canvas实现雪花飘动效果的示例代码
利用html+css实现菜单栏缓慢下拉效果的示例代码
CSS实现多个元素在盒子内两端对齐效果
Html5页面播放M4a音频文件
Html分层的box-shadow效果的示例代码
原生CSS实现文字无限轮播的通用方法
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
You might like
PHP引用(&amp;)各种使用方法实例详解
2014/03/20 PHP
CI框架中zip类应用示例
2014/06/17 PHP
php采集神器cURL使用方法详解
2016/02/19 PHP
浅析PHP类的反射来实现依赖注入过程
2018/02/06 PHP
javascript 禁止复制网页
2009/06/11 Javascript
YUI的Tab切换实现代码
2010/04/11 Javascript
js 处理URL实用技巧
2010/11/23 Javascript
javascript实现rgb颜色转换成16进制格式
2015/07/10 Javascript
微信小程序 页面传参实例详解
2016/11/16 Javascript
js document.getElementsByClassName的使用介绍与自定义函数
2016/11/25 Javascript
jQuery 判断元素整理汇总
2017/02/28 Javascript
nodejs6下使用koa2框架实例
2017/05/18 NodeJs
解决使用vue.js路由后失效的问题
2018/03/17 Javascript
vue实现添加与删除图书功能
2018/10/07 Javascript
AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 Javascript
JS实现滚动条触底加载更多
2019/09/19 Javascript
JS面向对象之多选框实现
2020/01/17 Javascript
[48:48]VGJ.T vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python标准库之多进程(multiprocessing包)介绍
2014/11/25 Python
python3 pandas 读取MySQL数据和插入的实例
2018/04/20 Python
python 不同方式读取文件速度不同的实例
2018/11/09 Python
Python实现获取汉字偏旁部首的方法示例【测试可用】
2018/12/18 Python
解决PyCharm控制台输出乱码的问题
2019/01/16 Python
python 截取XML中bndbox的坐标中的图像,另存为jpg的实例
2020/03/10 Python
python使用OpenCV模块实现图像的融合示例代码
2020/04/10 Python
python3.6使用SMTP协议发送邮件
2020/05/20 Python
Opencv求取连通区域重心实例
2020/06/04 Python
Michael Kors美国官网:美式奢侈生活风格的代表
2016/11/25 全球购物
Nike瑞典官方网站:Nike.com (SE)
2018/11/26 全球购物
蔻驰意大利官网:COACH意大利
2019/01/16 全球购物
优质有机椰子产品:Dr. Goerg
2019/09/24 全球购物
汉米尔顿手表官网:Hamilton
2020/09/13 全球购物
高中生自我评价个人范文
2013/11/09 职场文书
鲜果饮品店创业计划书
2014/01/21 职场文书
创业计划书之干洗店
2019/09/10 职场文书
mysql5.6主从搭建以及不同步问题详解
2021/12/04 MySQL