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 相关文章推荐
全面解析CSS Media媒体查询使用操作(推荐)
Aug 15 HTML / CSS
50个强大璀璨的CSS3/JS技术运用实例
Feb 27 HTML / CSS
CSS3 仿微信聊天小气泡实例代码
Apr 05 HTML / CSS
CSS3 实现童年的纸飞机
May 05 HTML / CSS
CSS3 transition 实现通知消息轮播条
Oct 14 HTML / CSS
canvas绘制文本内容自动换行的实现代码
Jan 14 HTML / CSS
HTML5 语义化结构化规范化
Oct 17 HTML / CSS
带你认识HTML5中的WebSocket
May 22 HTML / CSS
通过HTML5 Canvas API绘制弧线和圆形的教程
Mar 14 HTML / CSS
html5的input的required使用中遇到的问题及解决方法
Apr 24 HTML / CSS
html+js 实现markdown编辑器效果
Oct 23 HTML / CSS
解决html5中的video标签ios系统中无法播放使用的问题
Aug 10 HTML / CSS
使用canvas实现雪花飘动效果的示例代码
利用html+css实现菜单栏缓慢下拉效果的示例代码
CSS实现多个元素在盒子内两端对齐效果
Html5页面播放M4a音频文件
Html分层的box-shadow效果的示例代码
原生CSS实现文字无限轮播的通用方法
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
You might like
PHILIPS L4X25T电路分析和打理
2021/03/02 无线电
ThinkPHP CURD方法之page方法详解
2014/06/18 PHP
PHP获取数组长度或某个值出现次数的方法
2015/02/11 PHP
php实现根据词频生成tag云的方法
2015/04/17 PHP
php mysqli查询语句返回值类型实例分析
2016/06/29 PHP
PHP 芝麻信用接入的注意事项
2016/12/01 PHP
Laravel中Facade的加载过程与原理详解
2017/09/22 PHP
Alliance vs AM BO3 第二场2.13
2021/03/10 DOTA
js常用代码段收集
2011/10/28 Javascript
通过js来制作复选框的全选和不选效果
2014/05/22 Javascript
vuex实现简易计数器
2016/10/27 Javascript
SelecT下拉框选中和取值的解决方法
2016/11/22 Javascript
JavaScript拖动层Div代码
2017/03/01 Javascript
vue全局组件与局部组件使用方法详解
2018/03/29 Javascript
jQuery实现获取及设置CSS样式操作详解
2018/09/05 jQuery
Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法
2019/09/16 Javascript
[01:29:46]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第二局
2016/02/27 DOTA
Python中用Ctrl+C终止多线程程序的问题解决
2013/03/30 Python
Python常用的日期时间处理方法示例
2015/02/08 Python
python+opencv实现动态物体追踪
2018/01/09 Python
python提取照片坐标信息的实例代码
2019/08/14 Python
python批量将excel内容进行翻译写入功能
2019/10/10 Python
Python Pickle 实现在同一个文件中序列化多个对象
2019/12/30 Python
python保留格式汇总各部门excel内容的实现思路
2020/06/01 Python
Funko官方商店:源自美国,畅销全球搪胶收藏玩偶
2018/09/15 全球购物
英国和世界各地预订便宜的酒店:LateRooms.com
2019/05/05 全球购物
Shell脚本如何向终端输出信息
2014/04/25 面试题
生产内勤岗位职责
2013/12/07 职场文书
医院护士专业个人的求职信
2013/12/09 职场文书
护士实习生自我鉴定范文
2013/12/10 职场文书
初一生物教学反思
2014/01/18 职场文书
2014年班级工作总结范文
2014/12/23 职场文书
2016高考寄语或鼓励的话语
2015/12/04 职场文书
nginx配置ssl实现https的方法示例
2021/03/31 Servers
Mysql中@和@@符号的详细使用指南
2022/06/05 MySQL
Promise静态四兄弟实现示例详解
2022/07/07 Javascript