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 相关文章推荐
HTML5时代CSS设置漂亮字体取代图片
Sep 04 HTML / CSS
CSS3实现翘边的阴影效果的代码示例
Jun 13 HTML / CSS
详解CSS3中字体平滑处理和抗锯齿渲染
Mar 29 HTML / CSS
css3实现画半圆弧线的示例代码
Nov 06 HTML / CSS
html5自带表单验证体验优化及提示气泡修改功能
Sep 12 HTML / CSS
HTML5 Canvas draw方法制作动画效果示例
Jul 11 HTML / CSS
HTML5 WebSocket实现点对点聊天的示例代码
Jan 31 HTML / CSS
浅析HTML5中的download属性使用
Mar 13 HTML / CSS
详解使用postMessage解决iframe跨域通信问题
Nov 01 HTML / CSS
canvas 基础之图像处理的使用
Apr 10 HTML / CSS
css3 filter属性的使用简介
Mar 31 HTML / CSS
在CSS中使用when/else的方法
Jan 18 HTML / CSS
使用canvas实现雪花飘动效果的示例代码
利用html+css实现菜单栏缓慢下拉效果的示例代码
CSS实现多个元素在盒子内两端对齐效果
Html5页面播放M4a音频文件
Html分层的box-shadow效果的示例代码
原生CSS实现文字无限轮播的通用方法
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
You might like
php adodb连接不同数据库
2009/03/19 PHP
php 购物车实例(申精)
2009/05/11 PHP
浅析使用Turck-mmcache编译来加速、优化PHP代码
2013/06/20 PHP
再推荐十款免费的php开发工具
2015/11/09 PHP
Yii2 rbac权限控制之菜单menu实例教程
2016/04/28 PHP
PHP mongodb操作类定义与用法示例【适合mongodb2.x和mongodb3.x】
2018/06/16 PHP
在JavaScript中遭遇级联表达式陷阱
2007/03/08 Javascript
Javascript中获取出错代码所在文件及行数的代码
2010/09/23 Javascript
解析dom中的children对象数组元素firstChild,lastChild的使用
2013/07/10 Javascript
JS获取文本框,下拉框,单选框的值的简单实例
2014/02/26 Javascript
textarea焦点的用法实现获取焦点清空失去焦点提示效果
2014/05/19 Javascript
js使用removeChild方法动态删除div元素
2014/08/01 Javascript
js实现新浪微博首页效果
2015/10/16 Javascript
vue.js将unix时间戳转换为自定义时间格式
2017/01/03 Javascript
深入研究React中setState源码
2017/11/17 Javascript
微信小程序websocket实现聊天功能
2020/03/30 Javascript
JS判断用户用的哪个浏览器实例详解
2018/10/09 Javascript
JavaScript常见继承模式实例小结
2019/01/11 Javascript
解决vue+ element ui 表单验证有值但验证失败问题
2020/01/16 Javascript
iview实现图片上传功能
2020/06/29 Javascript
使用 Github Actions 自动部署 Angular 应用到 Github Pages的方法
2020/07/20 Javascript
vue 子组件和父组件传值的示例
2020/09/11 Javascript
[01:14:10]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS Orenda
2014/05/22 DOTA
Python使用minidom读写xml的方法
2015/06/03 Python
PyCharm代码回滚,恢复历史版本的解决方法
2018/10/22 Python
python求最大值最小值方法总结
2019/06/25 Python
Python实现打包成库供别的模块调用
2020/07/13 Python
常用的10个Python实用小技巧
2020/08/10 Python
Jupyter notebook命令和编辑模式常用快捷键汇总
2020/11/17 Python
JavaScript+Canvas实现自定义画板的示例代码
2019/05/13 HTML / CSS
英国最大的电子产品和家电零售企业:Currys PC World
2016/09/24 全球购物
应届专科生个人的自我评价
2014/01/05 职场文书
社区食品安全实施方案
2014/03/28 职场文书
设备售后服务承诺书
2014/05/30 职场文书
2015年销售助理工作总结
2015/05/11 职场文书
vue @ ~ 相对路径 路径别名设置方式
2022/06/05 Vue.js