首页
行业
前端
特效
人生
知识库
讨论组
您现在的位置:
首页
>>
前端
>> 内容
CSS滤镜示范(filter)附源代码(静态滤镜)
时间:2006/8/5 点击:
核心提示:
filter(css滤镜)body { margin: 0px; padding: 0px; } table { font-size: 12px; border: 1px solid #0000FF;...
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需刷新才能执行
]
Tags:
CS
SS
S滤
滤镜
作者:佚名 来源:网络
上一篇:
CSS实现表格的背景两色渐变
下一篇:
保存几个不错的css特效字
您可能感兴趣的文章
CSS2018:突破边界思维 安全是所有0前面的1 _科技_环球网
css中position:absolute和relative的知识点
CSS之水平垂直居中布局的五种方法介绍
CSS照片墙代码实现教程
CSS 控制<table>内容超出表格长度后自动隐藏教程
相关评论
发表我的评论
大名:
内容:
本类热门
06-26
·
Leaflet加载GeoServer发布的WMTS地图服务(代码实例)
04-12
·
百度地图只显示道路,不显示建筑的实现方法
04-19
·
could not initialize Proxifier kext问题记录
03-02
·
Echartstooltip自定义formatter设置字体颜色
05-28
·
iview Tooltip换行及渲染的解决方案
06-19
·
如何快速获取WWDC2013的所有视频及文档
06-29
·
百度地图创建标注标签maker与Label的实战教程
06-26
·
Swiper自动滚屏错位问题的解决办法
05-17
·
webpack4.x打包图片时报错如何解决?
09-05
·
HTML常用组件——轮播组件
本类推荐
没有
本类固顶
没有
易笔记(
art.yibiji.com
) © 2025 版权所有 All Rights Reserved.
本站部分内容收集于互联网若有侵权请联系站长删除
鄂ICP备18030946号-1