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实现的鼠标经过按钮特效教程
Nov 09 HTML / CSS
如何使用css3实现一个类在线直播的队列动画的示例代码
Jun 17 HTML / CSS
CSS3制作圆形滚动进度条动画的示例
Nov 05 HTML / CSS
Html5画布_动力节点Java学院整理
Jul 13 HTML / CSS
HTML5中实现拖放效果无须借助javascript
Dec 26 HTML / CSS
图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传
Jan 20 HTML / CSS
【HTML5】Canvas绘制简单图片教程
May 13 HTML / CSS
可能这些是你想要的H5软键盘兼容方案(小结)
Apr 23 HTML / CSS
用canvas显示验证码的实现
Apr 10 HTML / CSS
html5 拖拽及用 js 实现拖拽功能的示例代码
Oct 23 HTML / CSS
HTML5来实现本地文件读取和写入的实现方法
May 25 HTML / CSS
css实现左上角飘带效果的完整代码
Mar 18 HTML / CSS
使用canvas实现雪花飘动效果的示例代码
利用html+css实现菜单栏缓慢下拉效果的示例代码
CSS实现多个元素在盒子内两端对齐效果
Html5页面播放M4a音频文件
Html分层的box-shadow效果的示例代码
原生CSS实现文字无限轮播的通用方法
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
You might like
ThinkPHP使用心得分享-ThinkPHP + Ajax 实现2级联动下拉菜单
2014/05/15 PHP
推荐40个简单的 jQuery 导航插件和教程(下篇)
2012/09/14 Javascript
jquery导航制件jquery鼠标经过变色效果示例
2013/12/05 Javascript
Javascript四舍五入Math.round()与Math.pow()使用介绍
2013/12/27 Javascript
JavaScript中switch判断容易犯错的一个细节
2014/08/27 Javascript
JS解析XML实例分析
2015/01/30 Javascript
javascript手工制作悬浮菜单
2015/02/12 Javascript
基于javascript实现漂亮的页面过渡动画效果附源码下载
2015/10/26 Javascript
使用js获取地址栏参数的方法推荐(超级简单)
2016/06/14 Javascript
Bootstrap实现基于carousel.js框架的轮播图效果
2017/05/02 Javascript
Vuejs监听vuex中值的变化的方法示例
2018/12/02 Javascript
js基础之事件捕获与冒泡原理
2019/10/09 Javascript
Vue实现base64编码图片间的切换功能
2019/12/04 Javascript
JavaScript实现点击切换验证码及校验
2021/01/10 Javascript
nodejs中的异步编程知识点详解
2021/01/17 NodeJs
[04:13]2018国际邀请赛典藏宝瓶Ⅱ饰品一览
2018/07/21 DOTA
详细讲解用Python发送SMTP邮件的教程
2015/04/29 Python
python下setuptools的安装详解及No module named setuptools的解决方法
2017/07/06 Python
PyQt5 pyqt多线程操作入门
2018/05/05 Python
解决matplotlib库show()方法不显示图片的问题
2018/05/24 Python
详解python单元测试框架unittest
2018/07/02 Python
python实现LBP方法提取图像纹理特征实现分类的步骤
2019/07/11 Python
Django模板导入母版继承和自定义返回Html片段过程解析
2019/09/18 Python
从零开始的TensorFlow+VScode开发环境搭建的步骤(图文)
2020/08/31 Python
H5仿微信界面教程(一)
2017/07/05 HTML / CSS
FitFlop美国官网:英国符合人体工学的鞋类品牌
2018/10/05 全球购物
美国批发供应商:Kole Imports
2019/04/10 全球购物
力学专业毕业生自荐信
2013/11/17 职场文书
医药公司采购员岗位职责
2014/09/12 职场文书
2014年体育部工作总结
2014/11/13 职场文书
2014年建筑工作总结
2014/11/26 职场文书
教学质量月活动总结
2015/05/11 职场文书
郭明义观后感
2015/06/08 职场文书
公务员处分决定书
2015/06/25 职场文书
大学生饮品店创业计划书范文
2019/07/10 职场文书
Python正则表达式中flags参数的实例详解
2022/04/01 Python