阅读量:0
CSS滤镜可以实现绚丽的图片播放效果，如模糊、亮度调节等。
巧用CSS滤镜制作绚丽图片播放效果，可以通过使用revealTrans滤镜来实现，这种滤镜是CSS1中的一个特性，可以用来制作超炫的图片播放效果，每张图片都可以有自己的链接地址，使得用户点击图片时能够跳转到不同的页面。
实现思路主要是使用revealTrans滤镜来制作出超炫图片播放的效果，并确保每张图片都有自己的链接地址，具体步骤如下：
1、在HTML文档的<head>中插入JavaScript代码，用于预加载图片和设置定时器。
2、在<body>中插入图片，并在图片的<img>标签中插入CSS样式，设置FILTER属性为revealTrans，指定Duration（持续时间）和Transition（过渡效果）的值。
3、给图片添加超链接，使得用户点击图片时能够跳转到指定的页面。
4、加入JavaScript代码，用于控制图片的切换和链接的跳转。
这种方法的优点是可以完全使用CSS和JavaScript来实现，不需要依赖任何外部库或插件，由于CSS3的新特性，动画效果在现代浏览器的帮助下会非常顺滑。
以下是一个简单的示例：
<!DOCTYPE html> <html> <head> <title>CSS revealTrans Filter Example</title> <script type="text/javascript"> function reapply() { setTimeout("slideit()", 800); return true; } window.onerror = reapply; </script> </head> <body onload="slideit()"> <a href="JavaScript:slidelink()"> <img src="images/image1.jpg" width="120" height="90" border="0" style="FILTER: revealTrans(Duration=2, Transition=23)" name="slide"> </a> <script type="text/javascript"> var number_of_images = 9; var speed = 3; var step = 1; var whichimage = 1; function slideit() { if (!document.images) return; document.images.slide.src = eval("image" + step + ".src"); if (document.all) slide.filters.item(0).Play(); whichimage = step; if (step < number_of_images) step++; else step = 1; setTimeout("slideit()", speed*1000 + 3000); } function slidelink() { if (whichimage == 1) top.location.href = "index.HTML"; if (whichimage == 2) top.location.href = "news.HTML"; if (whichimage == 3) top.location.href = "game.HTML"; // and so on... } </script> </body> </html>在这个示例中，首先在<head>中插入了JavaScript代码，用于预加载图片和设置定时器，然后在<body>中插入了一个图片，并在图片的<img>标签中插入了CSS样式，设置了FILTER属性为revealTrans，指定了Duration和Transition的值，给图片添加了一个超链接，使得用户点击图片时能够跳转到指定的页面，加入了JavaScript代码，用于控制图片的切换和链接的跳转。
这种方法的缺点是需要编写较多的JavaScript代码，对于不熟悉JavaScript的开发者来说可能会有一定的难度，由于revealTrans滤镜是CSS1的特性，可能在一些较新的浏览器中不被支持，在使用这种方法时需要注意兼容性问题。
FAQs:
Q1: 如何使用CSS中的revealTrans滤镜？
A1: CSS中的revealTrans滤镜可以用来制作超炫的图片播放效果，使用方法是在<img>标签中插入CSS样式，设置FILTER属性为revealTrans，指定Duration（持续时间）和Transition（过渡效果）的值。<img src="images/image1.jpg" width="120" height="90" border="0" style="FILTER: revealTrans(Duration=2, Transition=23)" name="slide">。
Q2: CSS中的revealTrans滤镜有哪些参数？
A2: CSS中的revealTrans滤镜有两个参数：Duration（持续时间）和Transition（过渡效果），Duration参数定义了动画的持续时间，单位是秒；Transition参数定义了过渡效果的类型，取值范围是023，分别对应24种不同的过渡效果。
