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+jQuery+PHP+MySQL实现的在线答题功能
Apr 25 HTML / CSS
CSS3中使用RGBA设置透明度的示例
Aug 04 HTML / CSS
CSS3的resize属性使用初探
Sep 27 HTML / CSS
CSS3中的常用选择器使用示例整理
Jun 13 HTML / CSS
CSS3实现时间轴效果
Jul 11 HTML / CSS
深入理解css中vertical-align属性
Apr 18 HTML / CSS
css3进阶之less实现星空动画的示例代码
Sep 10 HTML / CSS
HTML5 用动画的表现形式装载图像
Mar 08 HTML / CSS
HTML5中判断用户是否正在浏览页面的方法
May 03 HTML / CSS
详解HTML5 data-* 自定义属性
Jan 24 HTML / CSS
Canvas中设置width与height的问题浅析
Nov 01 HTML / CSS
微信小程序之html5 canvas绘图并保存到系统相册
Jun 20 HTML / CSS
使用canvas实现雪花飘动效果的示例代码
利用html+css实现菜单栏缓慢下拉效果的示例代码
CSS实现多个元素在盒子内两端对齐效果
Html5页面播放M4a音频文件
Html分层的box-shadow效果的示例代码
原生CSS实现文字无限轮播的通用方法
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
You might like
如何获知PHP程序占用多少内存(memory_get_usage)
2012/09/23 PHP
非常精妙的PHP递归调用与静态变量使用
2012/12/16 PHP
解析php扩展php_curl.dll不加载的解决方法
2013/06/26 PHP
CodeIgniter使用phpcms模板引擎
2013/11/12 PHP
CI映射(加载)数据到view层的方法
2016/03/28 PHP
laravel 5.4中实现无限级分类的方法示例
2017/07/27 PHP
基于PHP常用文件函数和目录函数整理
2017/08/17 PHP
php tpl模板引擎定义与使用示例
2019/08/09 PHP
php实现对短信验证码发送次数的限制实例讲解
2021/03/04 PHP
jquery text,radio,checkbox,select操作实现代码
2009/07/09 Javascript
js 限制数字 js限制输入实现代码
2012/12/04 Javascript
JS 去前后空格大全(IE9亲测)
2013/07/15 Javascript
jQuery中:selected选择器用法实例
2015/01/04 Javascript
JavaScript实现Java中StringBuffer的方法
2015/02/09 Javascript
jquery+javascript编写国籍控件
2015/02/12 Javascript
JavaScript计算某一天是星期几的方法
2015/08/05 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(一)
2016/05/17 Javascript
js利用clipboardData实现截屏粘贴功能
2016/10/12 Javascript
webpack3升级到webpack4遇到问题总结
2019/09/30 Javascript
js实现小星星游戏
2020/03/23 Javascript
[01:23:45]DOTA2-DPC中国联赛 正赛 CDEC vs Dragon BO3 第一场 1月22日
2021/03/11 DOTA
Python文件及目录操作实例详解
2015/06/04 Python
浅析python继承与多重继承
2018/09/13 Python
基于Python中isfile函数和isdir函数使用详解
2019/11/29 Python
python 中的paramiko模块简介及安装过程
2020/02/29 Python
Python通过Pillow实现图片对比
2020/04/29 Python
JAVA的事件委托机制和垃圾回收机制
2014/09/07 面试题
什么是java序列化,如何实现java序列化
2012/11/14 面试题
高中生学习生活的自我评价
2013/10/09 职场文书
新学期开学寄语
2014/01/18 职场文书
关于学习的演讲稿
2014/05/10 职场文书
离婚协议书怎样才有法律效力
2014/10/10 职场文书
幼儿园教师读书笔记
2015/06/29 职场文书
《藏戏》教学反思
2016/02/23 职场文书
股权投资协议书
2016/03/23 职场文书
2016年村党支部公开承诺书
2016/03/24 职场文书