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弹性盒模型开发笔记(一)
Apr 26 HTML / CSS
CSS3实现的文本3D效果附图
Sep 03 HTML / CSS
用CSS3打造HTML5的Logo(实现代码)
Jun 16 HTML / CSS
用css3写出气球样式的示例代码
Sep 11 HTML / CSS
css3实现元素环绕中心点布局的方法示例
Jan 15 HTML / CSS
基于HTML5 Canvas 实现商场监控实例详解
Nov 20 HTML / CSS
html5 Canvas画图教程(8)—canvas里画曲线之bezierCurveTo方法
Jan 09 HTML / CSS
HTML5 Canvas——用路径描画线条实例介绍
Jun 09 HTML / CSS
使用纯HTML5编写一款网页上的时钟的代码分享
Nov 16 HTML / CSS
html5生成柱状图(条形图)效果的实例代码
Mar 25 HTML / CSS
html5通过postMessage进行跨域通信的方法
Dec 04 HTML / CSS
Html5页面点击遮罩层背景关闭遮罩层
Nov 30 HTML / CSS
使用canvas实现雪花飘动效果的示例代码
利用html+css实现菜单栏缓慢下拉效果的示例代码
CSS实现多个元素在盒子内两端对齐效果
Html5页面播放M4a音频文件
Html分层的box-shadow效果的示例代码
原生CSS实现文字无限轮播的通用方法
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
You might like
PHP编实现程动态图像的创建代码
2008/09/28 PHP
php中实现记住密码自动登录的代码
2011/03/02 PHP
php获得url参数中具有&amp;的值的方法
2014/03/05 PHP
Laravel 中获取上一篇和下一篇数据
2015/07/27 PHP
JavaScript读取中文cookie时的乱码问题的解决方法
2009/10/14 Javascript
flash遮住div问题的正确解决方法
2014/02/27 Javascript
jquery插件开发之实现google+圈子选择功能
2014/03/10 Javascript
两种不同的方法实现js对checkbox进行全选和反选
2014/05/13 Javascript
jquery重复提交请求的原因浅析
2014/05/23 Javascript
JavaScript中的原型prototype属性使用详解
2015/06/05 Javascript
创建你的第一个AngularJS应用的方法
2015/06/16 Javascript
vue父组件通过props如何向子组件传递方法详解
2017/08/16 Javascript
使用vue的v-for生成table并给table加上序号的实例代码
2017/10/27 Javascript
详解javascript 正则表达式之分组与前瞻匹配
2018/05/30 Javascript
微信小程序云开发之数据库操作
2019/05/18 Javascript
[41:08]2014 DOTA2国际邀请赛中国区预选赛 HGT VS NE
2014/05/22 DOTA
[03:40]DOTA2亚洲邀请赛小组赛第二日 赛事回顾
2015/01/31 DOTA
Python实现对PPT文件进行截图操作的方法
2015/04/28 Python
python3实现暴力穷举博客园密码
2016/06/19 Python
解决python3捕获cx_oracle抛出的异常错误问题
2018/10/18 Python
Python中利用aiohttp制作异步爬虫及简单应用
2018/11/29 Python
对python指数、幂数拟合curve_fit详解
2018/12/29 Python
python在回调函数中获取返回值的方法
2019/02/22 Python
Python利用matplotlib做图中图及次坐标轴的实例
2019/07/08 Python
使用pytorch搭建AlexNet操作(微调预训练模型及手动搭建)
2020/01/18 Python
python实现AHP算法的方法实例(层次分析法)
2020/09/09 Python
js实现移动端H5页面手指滑动刻度尺功能
2017/11/16 HTML / CSS
详解移动端html5页面长按实现高亮全选文本内容的兼容解决方案
2016/12/03 HTML / CSS
后勤岗位职责
2013/11/26 职场文书
伊索寓言教学反思
2014/05/01 职场文书
2014年电教工作总结
2014/12/19 职场文书
vue项目两种方式实现竖向表格的思路分析
2021/04/28 Vue.js
golang 生成对应的数据表struct定义操作
2021/04/28 Golang
你知道哪几种MYSQL的连接查询
2021/06/03 MySQL
python在package下继续嵌套一个package
2022/04/14 Python
Nginx代理Redis哨兵主从配置的实现
2022/07/15 Servers