css的滤镜应用

2009-05-03 0 条评论 4,331 次阅读 被赞了 0 次
本文发布于：2009-05-03，最后更新于：2016-07-26，如果内容失效请留言告知。

html示例代码和包含在其中的css代码，里面用的图片logo.jpg为本站logo，运行代码即可看到效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>CSS滤镜效果.html</title>
 
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 
 <style type="text/css">
 .alphas
 {
  filter:alpha(opacity=0,finishopacity=100,style=1,startx=0,starty=85,finishx=150,finishy=85);
 }
 .blurs
 {
  font-family:lucida handwirting italic;
  font-size:72px;
  font-style:bold;
  color:#336600;
  width:350px;/*这个属性不可少，否则效果不可见*/
  filter:blur(add=true,direction=90,strength=25);
 }
 .chromas
 {
  font-family:lucida handwirting italic;
  font-size:72px;
  font-style:bold;
  color:red;
  width:350px;
  filter:chroma(color=red);
 }
 .dropshadows
 {
  font-family:lucida handwirting italic;
  font-size:72px;
  font-style:bold;
  color:#336600;
  width:350px;
  filter:dropshadow(color=red,offx=15,offy=10,positive=1);
 }
 .fliphs
 {
  font-family:lucida handwirting italic;
  font-size:72px;
  font-style:bold;
  color:#336600;
  width:350px;
  filter:fliph;
 }
 .flipvs
 {
  font-family:lucida handwirting italic;
  font-size:72px;
  font-style:bold;
  color:#336600;
  width:350px;
  filter:flipv;
 }
 .glows
 {
  font-family:lucida handwirting italic;
  font-size:72px;
  font-style:bold;
  color:#336600;
  width:350px;
  filter:glow(color=blue,strength=15);
 }
 .grays
 {
  font-family:lucida handwirting italic;
  font-size:72px;
  font-style:bold;
  color:#336600;
  width:350px;
  filter:gray;
 }
 .inverts
 {
  font-family:lucida handwirting italic;
  font-size:72px;
  font-style:bold;
  color:#336600;
  width:350px;
  filter:invert;
 }
 .masks
 {
  font-family:lucida handwirting italic;
  font-size:72px;
  font-style:bold;
  color:#336600;
  width:350px;
  filter:mask(color=green);
 }
 .shadows
 {
  font-family:lucida handwirting italic;
  font-size:72px;
  font-style:bold;
  color:#336600;
  width:350px;
  filter:shadow(color=red,direction=225);
 }
 .waves
 {
  font-family:lucida handwirting italic;
  font-size:72px;
  font-style:bold;
  color:#336600;
  width:350px;
  filter:wave(add=true,freq=3,lightstrength=100,phase=45,strength=20);
 }
 .xrays
 {
  font-family:lucida handwirting italic;
  font-size:72px;
  font-style:bold;
  color:#336600;
  width:350px;
  filter:xray;
 }
 </style>
  </head>
 
  <body>
  <table width=1000 border=1>
  <tr><td width=100>滤镜属性</td><td width=100>描述</td><td width=400>参数和取值</td><td width=400>效果示例</td></tr>
  <tr><td><span class=alpha>Alpha</span></td><td>设置透明效果</td><td>opacity:透明度等级，0到100，0为完全透明<br />
  style:指定透明区域形状特征，0为均匀分布；1为线形；2为放射状；3为长方形<br />finishopacity:设置渐变结束时的透明度，达到渐变效果，值从0到100<br />
  startX,startY:渐变透明效果开始坐标<br />finishX,finishY:渐变透明效果结束坐标</td><td><p></p></td></tr>
  <tr><td>Blur</td><td>建立模糊效果</td><td>add:指定图片是否改变为模糊效果，true和false<br />
  direction:设置模糊方向，0度代表垂直向上，每45度为一个单位，默认向左270度<br />strength:代表多少个像素的宽度受到模糊影响，默认为5</td>
  <td><div class="blurs">GOOD LUCK !</div></td></tr>
  <tr><td>Chroma</td><td>把指定的颜色设置为透明</td><td>color:指定透明颜色</td><td>chroma<div class="chromas">示例</div></td></tr>
  <tr><td>DropShadow</td><td>建立一种偏移的影像轮廓，即投射阴影</td><td>color:投影的颜色<br />offx,offy:x,y方向阴影的偏移量<br />
  positive:true为任何非透明像素建立阴影，false为透明像素建立阴影</td><td><div class="dropshadows">dropshadow示例</div></td></tr>
  <tr><td>FlipH</td><td>水平反转</td><td>无</td><td><div class="fliphs">水平反转</div></td></tr>
  <tr><td>FlipV</td><td>垂直反转</td><td>无</td><td><div class="flipvs">垂直反转</div></td></tr>
  <tr><td>Glow</td><td>为对象的外边界增加光效</td><td>color:指定发光的颜色<br />
  strength:发光的强度</td><td><div class="glows">GLOW示例</div></td></tr>
  <tr><td>Gray</td><td>降低图片的彩色度，变成灰度图</td><td>无</td><td></td></tr>
  <tr><td>Invert</td><td>将色彩、饱和度以及亮度值完全反转建立底片效果</td><td>无</td><td></td></tr>
  <tr><td>Light</td><td>在一个对象上进行灯光投影</td><td>no</td><td>no</td></tr>
  <tr><td>Mask</td><td>为一个对象建立透明膜</td><td>color:指定掩膜的颜色</td><td><div class="masks">MASK示例</div></td></tr>
  <tr><td>Shadow</td><td>建立一个对象的固体轮廓，即阴影效果</td><td>color:投影颜色<br />direction:投影方向</td><td><div class="shadows">SHADOW示例</div></td></tr>
  <tr><td>Wave</td><td>在X轴和Y轴方向利用正弦波纹打乱图片</td><td>add:true代表按波浪式打乱，false不打乱<br />
  freq:生成波纹的频率（产生多少个波纹)<br />lightstrength:使生成的波纹增强效果（值为0到100）<br />
  phase:设置正弦波开始的偏移量，通用0，可达100<br />strength:设置正弦波的振幅</td><td><div class="waves">WAVE 示例</div> </td></tr>
  <tr><td>Xray</td><td>只显示对象的轮廓</td><td>无</td><td></td></tr>
  </table>
 
  </body>
</html>

相关文章:

Default Thumbnail为什么火狐谷歌chrome等浏览器不支持一些css滤镜 Default Thumbnail网页制作中css+div定义标签样式的4种基本用法 Default ThumbnailPJblog通用皮肤首字下沉效果之CSS修改 Default ThumbnailCSS写的进度条效果 Default Thumbnail经典:不错的JS特效css菜单效果 Default ThumbnailCSS Hack汇总快查 Default Thumbnailcss控制图片按钮的代码 Default ThumbnailCSS Sprite含义、相关技术、示例、优化技巧介绍及优化工具下载 Default ThumbnailCSS学习进阶：关于浏览器兼容设计的几点基础知识 Default ThumbnailCSS学习进阶：一些CSS设计的实用小技巧参考 Default Thumbnailcss3的​​​​​transition特性：增强网站的体验的CSS3 Transition使用详解 Default Thumbnailoschina 的愚人节小创意：CSS3 的 transform 特性
点赞 (0)
知识共享许可协议
本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

Captcha Code