首页
知识兔
小兔考试
站内搜索
高手课
知识论
小兔下载
小兔网
注册登录
导航开关
首页
计算机
加入会员
视频号下载工具
免费下载精品课
CSS滤镜示范(filter)附源代码(静态滤镜)_CSS/HTML-css教程
说明
作者:
King
分类:
计算机
日期:2021年6月21日
filter(css滤镜)
filter视觉滤镜的种类
Alpha(透明度)
Blur(模糊)
Chroma(指定颜色透明)
DropShadow(不透明阴影)
FlipH&FlipV(翻转)
Glow(边缘光晕)
Gray(去色)
Invert(底片效果)
Mask(遮照效果)
filter:Shadow(影子)
Wave(波浪)
Xray(轮廓加亮)
Alpha:
原始图片
开始透明度(opacity):100结束透明度(finishopacity):0开始位置(startX,startY):(0,0)结束位置(finishX,finishY):(50,50)
开始透明度(opacity):70结束透明度(finishopacity):20开始位置(startX,startY):(0,0)结束位置(finishX,finishY):(50,50)
Blur:
原始图片
显示原来的图片,且以270度的方向模糊20px
不显示原来的图片,且以90度方向模糊20px
Chroma
原始图片
Chroma指定的字体颜色(我是CCHXP)变为透明
DropShadow
原始图片
设置阴影颜色为淡绿色,往右移5px,往下移5px,且阴影呈不透明的效果。
设置阴影颜色为粉红色,往左移5px,往上移5px,且阴影呈不透明的效果。
FlipH&FlipV
原始图片
设置图片水平翻转FlipH
设置图片垂直翻转FlipV
Glow
原始图片
设置图片光晕颜色为黄色,强度为10
设置图片光晕颜色为红色,强度为20
Gray
原始图片
将图片的颜色去除,以达到灰色效果
Invert
原始图片
设置图片颜色呈底片效果
Mask
原始图片
设置图片的屏蔽颜色为蓝色
Shadow
原始图片
设置图片阴影颜色为绿色,往225度方向
设置图片阴影颜色为红色,往135度方向
Wave
原始图片
不显示原始图片,有5个振幅为20象素的波浪,其光的强度为30,波浪其始位置为50
显示原始图片,有3个振幅为50象素的波浪,其光的强度为50,波浪起始位置为100
Xray
原始图片
X光照片的效果
Gray&Invert&Xray比较
原始图片
Gray效果
Invert效果
Xray效果
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
上一页
下一页
我在这里:
首页
▶
计算机
▶
CSS滤镜示范(filter)附源代码(静态滤镜)_CSS/HTML-css教程
点击领取支付宝红包
点击下载免费精品课
最新文章
Cadence SPB Allegro OrCAD 2022 17.4破解版下载安装详细教程
SketchUp Pro 2021 v21.1.332.0 x64 中文破解版下载 crack
Mentor Graphics FloEFD 2019.1.0 v4540 破解版下载 crack
Gemvision Matrix 9.0 build 7349 x64 破解版下载 crack
CAMWorks 2021 Plus SP4 for SolidWorks 2020-2022 破解版下载 crack
OpenRoads Designer CONNECT Edition 2021 破解版下载
热门文章
1.6.1 什么是数组?C语言数组的基本概念
1.2.5 C语言编译器(C语言编程软件)完全攻略
1.2.8 哪款C语言编译器(IDE)适合初学者?
10款超赞的国外黄色主题网站欣赏,老司机请上路!
人工客服,帮忙解决,请勿心急