由CSS控制的闪烁效应

一个文本或图片周围有一圈光晕。晕一次闪烁的每一秒。当鼠标移动到顶部时,它会立即停止闪烁,当鼠标离开时继续闪烁,这种效果被用于需要特别注意的内容(如警告、报告添加的内容等),并能起到很好的效果。

上述例子可以达到上述效果,因为这里是一个图片了,我们看不到的动态效果,只要介绍以下方法,作一个尝试,效果一目了然。这个想法是:使用CSS辉光滤波器产生晕轮效应,基于CSS属性的特点,可以动态改变,使用短的Javascript程序来改变一个属性的值的每一秒,从而实现闪烁效果,两事件(onmouseover和onmouseout)调用的Javascript程序来控制闪光。

制作方法:

1、制作一个辉光过滤、CSS过滤设置方法,请参考相关文章的CSS过滤应用技巧。这里不再重复。不要使用Dreamweaver用户,请将下面的代码复制到页面头和头的源代码中:

样式类型文本

!—

。glow1 {过滤:辉光(颜色= # FF0000,强度= 2)}





2,插入一个层,命名为:鲍伯。上一层写一段文字,然后加载一个辉光滤波器对加层和两个事件实现停止闪烁,当鼠标移动到文本,并不断闪烁,当鼠标离开移动文字。代码:onclick= stopflash(这)代码后层的标记是一样的这:

div id=鲍勃style=位置:绝对;宽度:572px;身高:35px;Z指数:1class=glow1onmouseover =onmouseover =()()。

3,在头和头之间插入这样一个Javascript程序:

脚本

!—

函数(init)/光环开始闪烁

{

使Flash(鲍伯);

}

功能使Flash(obj)

{

obj。flashtimer = setInterval(鲍勃。过滤器。辉光。启用=!鲍伯。滤镜。启用。

这里是1000毫秒闪烁时间,以毫秒为单位,在这种情况下设置为1000毫秒(即1s),您可以根据需要进行修改。

功能stopflash(obj) /停止闪烁的光环

{ clearInterval(obj。flashtimer)

}




4。添加这样一段代码的身体的标签在网页的源代码:onload =init()。该代码的功能是,当页面被加载的光环开始闪烁。

在这一点上,在生产结束后,按F12键可以看到预期的效果。

光环的颜色和光晕长度可以修改CSS筛选器中的参数值以更改。通过修改Javascript中的区间值可以调整晕闪烁的时间间隔,如果将图像插入到该层(透明背景的GIF图像中),就成为图像边缘的光晕闪烁效果。