css3filter怎么使用,html filter属性

一、前言

　　 在编写前端页面的动画效果时，或多或少会用到过滤器属性，由于其属性值过多，故本篇用于整理和记录其相关资料。

二、介绍

　　过滤器属性定义了元素（通常是)的可视效果。

　　属性值如下：

　　属性值描述没有人默认值，没有效果模糊（像素)给图像设置高斯模糊，则默认值是0。亮度(%)给图片应用一种线性乘法，使其看起来更亮或更暗，默认值是1。对比度(%)调整图像的对比度，默认值是1。灰度(%)将图像转换为灰度图像，默认值是0。色调-旋转（度)给图像应用色相旋转，默认值是0度。反转(%)反转输入图像，默认值是0。不透明度(%)转化图像的透明程度，默认值是1。饱和(%)转换图像饱和度，默认值是1。棕褐色(%)将图像转换为深褐色，默认值是0。

　　注意：滤镜通常使用百分比（如：75%), 当然也可以使用小数来表示（如：0.75)。

三、演示代码

　　 !文档类型html html lang= zh head meta charset= UTF-8 标题文档/标题样式。集装箱{ margin:4r em auto；宽度：100%;高度：自动；文本对齐：居中；} .box { display:inline-block；边距：1人民币；} .框ul { margin:0；填充：0;列表样式：无；文本对齐：左对齐；} .框ul Li { margin:25雷姆0；填充：25雷姆；光标：指针；} .box ul Li:hover { background-color:# eee；} ul李。活动{背景色：# eee} .box img { width:260 px；高度：260 px }/style/head body div class= container H3点击左侧属性显示效果/H3 div class= box ul Li data-p= blur(5px)滤镜：blur(5px)/Li Li data-p= brightness(。5)滤镜：亮度(。5)/李李数据-p=对比(。5)/李李数据-p=灰度(1)过滤器：灰度(1)/Li Li data-p= hue-rotate(90度) filter:hue-rotate(90度)/Li Li data-p= invert(。4)/李丽丽数据-p=原图/div/div class= box div id= filter img src= https://tva 3。新浪img。cn/large/87 c 01 EC 7 gy 1 frmmmwb 3 anj 21 HC 0 u 0 b 2 a . jpg alt= /div div id= info 效果图/div/div/div script src= https://cdn。jsdelivr。net/NPM/jquery @ 3。6 .0/dist/jquery。量滴js /script script $(function(){ let $ lis=$( Li )；$lis.on(click ，function(){ $ lis。移除类(“active”)；设p=$(这个)。addClass(active ).数据( p )；$(#filter ).CSS({ filter :p })；$(#info ).文本( filter: p )；});});/script/body/html以上就是css3过滤器属性的使用简介的详细内容，更多关于css3过滤器属性的资料请关注其它相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。