CSS滤镜简单应用
来源：互联网 发布：linux dma驱动 编辑：程序博客网 时间：2024/05/16 01:55
一、跑马灯
主要是应用Aphla滤镜完成：
<marquee style="filter : alpha(opacity=100,style=3,finishOpacity=20,startx=0,starty=0,finishx=100,finishy=100);height:20px;">跑马灯程序的代码为:{ filter: Alpha(Opacity=100, FinishOpacity=20, Style=2, StartX=0, StartY=0, FinishX=100, FinishY=100)}； </marquee>二、淡入淡出效果
使用BlendTrans滤镜：
<body onload="playImg()"> <div> <script language="javascript" type="text/javascript"> //将图片路径放入数组中 ImgNum=new ImgArray(3); ImgNum[0]="1.jpg"; ImgNum[1]="2.jpg"; ImgNum[2]="3.jpg"; //设置数组的长度 function ImgArray(len) { this.length=len; } var i=1; //转换过程 function playImg() { if(i==2) i=0; else i++; imgpic.filters[0].apply(); imgpic.src=ImgNum[i]; imgpic.filters[0].play(); timeout=setTimeout("playImg()",4000); } </script> <img alt="" src="1.jpg" style="filter : BlendTrans(duration=3)" id="imgpic" height="437" width="750" /> </div></body>三
<div> <table style="width:100%"> <tr> <td style="filter:Blur(add=true,direction=90,strength=30);width=100%;"> <img src="1.jpg" width="300" height="200" /> <br />CSS--Blur滤镜 </td> </tr> <tr> <td style="filter : DropShadow(color=gray,offx=8,offy=5,positive=true);width:100%; height:30px; font-weight:bolder;"> <img src="1.jpg" width="300" height="200"/><br />CSS--DropShadow滤镜 </td> </tr> <tr> <td style="filter:Glow(color=gray,strength=10)"> <img src="1.jpg" width="300" height="200" style="margin:20px;"/><br />CSS--Glow滤镜 </td> </tr> <tr> <td style="filter:Gray()"> <!--应用于图像，将一幅图铃转变为灰色图--> <img src="1.jpg" width="300" height="200" style="margin:20px;"/><br />CSS--Gray滤镜 </td> </tr> <tr> <td style="filter:Invert()"> <!--反相显示对象内容(使图像类似于底片的效果)--> <img src="1.jpg" width="300" height="200" style="margin:20px;"/><br />CSS--Invert滤镜 </td> </tr> <tr> <td style="filter:Mask(color=black)"> <!--遮罩，使用一个颜色图层将包含有文字或图像等对象的区域遮盖，但是文字或图像部分 却以背景色显示出来（Mask滤镜不能应用于图像文件以实现相应的效果）--> CSS--Mask滤镜 </td> </tr> <tr> <td style="filter:shadow(color=gray,direction=90,strength=10)"> <!--shadow滤镜同Dropshadow滤镜一样为页面对象设置投影。但是Dropshadow滤镜利用偏移量来定义 投影位置，而Shadow滤镜能够在指定的方向上设置投影，且投影产生渐进的效果--> <img src="1.jpg" width="300" height="200" style="margin:20px;"/><br />CSS--shadow滤镜 </td> </tr> <tr> <td style="filter:wave(add=true,freq=3,lightstregth=20,phase=45,strength=20);font-size:72pt; font-weight:bold; color:rgb(189,1,64)"> <!--Wave滤镜可使页面对象产生波纹变形--> <img src="1.jpg" width="300" height="200" style="margin:20px;"/> <img src="1.jpg" width="300" height="200" style="margin:20px;filter:wave(add=true,freq=20,lightstregth=50,phase=60,strength=50);font-size:72pt; font-weight:bold; color:rgb(189,1,64);!important"/> <br />happy CSS--wave滤镜 </td> </tr> </table> </div>以下为第三部分的页面效果图：
- CSS滤镜简单应用
- CSS滤镜的应用
- CSS滤镜应用技巧
- CSS滤镜应用集锦
- CSS滤镜应用总结
- css 滤镜 的应用
- CSS 滤镜应用集锦 -- 巧用CSS的 RevealTrans 滤镜
- CSS 滤镜应用集锦 -- 巧用CSS的 RevealTrans 滤镜
- 图片切换-CSS滤镜revealTrans的应用
- 图片切换-CSS滤镜revealTrans的应用
- 在链接文字上应用CSS滤镜
- 简单说 CSS滤镜 filter属性
- CSS滤镜
- CSS滤镜
- CSS 滤镜
- CSS滤镜
- css滤镜
- CSS滤镜
- unix下实现echo机制
- Spring mvc框架的web上传文件文档
- 文件上传1————>struts2
- iPhone OS 开发 - 了解并解决代码签名问题
- Ubuntu 10.04 配置 tomcat7
- CSS滤镜简单应用
- Silverlight类库介绍-FJCore
- Node.js解决什么问题
- Linux 内存机制详解宝典
- 用nodejs实现json和jsonp服务
- 深入探索透视投影变换
- 20120417 杂知识点记录
- mysql数据库limit关键字
- hdu 4223 Dynamic Programming?
