用CSS实现水中倒影特效

实现倒影效果有很多种方法，如Flash，Java等，我们这里用CSS的wave滤镜结合Javascript来做，效果如下：

看到了吧？下面介绍制作过程

一.准备一幅图片

要求图片本身是一张倒影图，这样制作起来相对简单些。如下图：

图片名称：01.jpg 尺寸：240x180

二.制作波浪效果

1.用Dreamwaver等网页制作工具在网页中插入一个层，大小和所选图片一致，然后把层的背景设置为01.jpg，并把01.jpg插到层中，命名为water；代码如下：

2.使图片产生波纹效果要用到CSS的wave滤镜并结合Javascript实现。先介绍wave滤镜的一些基本语法和参数：

语法：

filter:wave(add=add,freq=freq, lightstrength=strength, phase=phase,strength=strength)

参数：

add	是否把对象按垂直的波纹样式打乱
freq	波纹的频率，即在对象上产生多少个完整的波纹
lightstrength	光影的亮度，取值范围0到100
phase	正弦偏移量
strength	振幅的大小

然后用Javascript调用：

代码很少吧！将上述代码放到<head>与</head>间，然后在<body...>中加入onload="lake()"就可以了。

三.制作遮盖层

第二步做好后你可以预览一下，图片有没有动起来？可惜是全在动，连岸上的部分也起了波澜，所以我们要作个遮盖层，把岸上的部分遮起来。方法是再插入一个层，位置和先前插入的层相同，背景也设置为01.jpg，宽度也不变，注意把高度设置到水陆分界线就可以了。代码如下：

<div style="position:absolute; left:0px; top:0px; width:240px; height:107px; z-index:2; background-image: url(01.jpg);layer-background-image: url(01.jpg); border: 1px none #000000">

整个的制作过程就是这样简单，全部代码如下：

<html>
<head>
<title>倒影一</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="Javascript">
var a=5;
var b=0;
function lake()
{
document.water.style.filter="wave(freq=8, strength=3, phase="+b+", lightstrength=8, add=add)";
b+=a;
mylake=setTimeout('lake()',0);
}
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000" onLoad="lake()">
<div style="position:absolute; width:240px; height:180px; z-index:1; background-image: url(01.jpg);layer-background-image: url(01.jpg); border: 1px none #000000; left:0px; top: 0px">
<img src="01.jpg" width="240" height="180" name="water">
</div>
<div style="position:absolute; left:0px; top:0px; width:240px; height:107px; z-index:2; background-image: url(01.jpg);layer-background-image: url(01.jpg); border: 1px none #000000">
</div>
</body>
</html>

如果没有合适的倒影图片也没关系，如有一张这样的图片：

也可以做出同样的效果，如下：

方法是用flipv滤镜产生一个图片的倒像，再用alpha滤镜加以修饰。这个效果的代码如下：

<html>
<head>
<title>倒影二</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="Javascript">
var a=5;
var b=0;
function lake()
{
document.water.style.filter="wave(freq=5, strength=3, phase="+b+", lightstrength=0, add=add)";
b+=a;
mylake=setTimeout('lake()',10);
}
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000" onLoad="lake()">
<div style="filter:flipv alpha(opacity=80);position:absolute; left:0px; top:116px; width:200px; height:116px; z-index:1; background-image: url(02.jpg); layer-background-image: url(02.jpg); border: 1px none #000000">
<img name="water" src="02.jpg" width="200" height="116"></div>
<div style="position:absolute; left:0px; top:0px; width:200px; height:0px; z-index:2">
<img src="02.jpg" width="200" height="116" ></div>
</body>
</html>

最后我们再看看这个摇摆的女孩，相信大家都会做得出来！

posted @ 2007-04-04 18:03 无名-小卒阅读(920) 评论(0) 收藏举报

刷新页面返回顶部

用CSS实现水中倒影特效

公告