The flicker effect _css/html with CSS control

A piece of text or a picture with a circle of halo around it, which flashes every second, and when the mouse moves over it immediately stops blinking and continues blinking as the mouse moves away. This effect is useful for content that requires special attention, such as alerts, new reports, and so on.

The above example can achieve the above effect, because here is a picture of the crawl, can not see the dynamic effect, as long as the method described below, make a try, its effect is at a glance. Its production idea is: the use of CSS "Glow" filter to produce halo effect, using the properties of CSS can be dynamically changed characteristics, with a small JavaScript program to change the value of the property every second, so that the effect of flashing, and then use two events ( onMouseOver and onmouseout) invoke JavaScript programs to control whether flashing.

Production method:

1, the production of a glow filter, CSS filter settings to see the "CSS Filter application Tips" related articles. Do not repeat here. Instead of using Dreamweaver users, copy the following code to the 〈head〉 and 〈/head〉 of the Web page source code:

〈style type= "Text/css"

〈!--

. glow1 {Filter:glow (color= #FF0000, strengh=2)}

--〉

〈/style〉

2, insert a layer, named: Bob. Write a paragraph of text on the layer. Then load a glow filter on the layer and add two events to force the blink to stop when the mouse moves over the text, and continue flashing when the mouse is moved. Code: onclick= "Stopflash (This)", the function of this code is: once the mouse moved to the text, the calling program's "Stopflash (This)" function to stop flashing; Onmouseout= "Init ()", which is the purpose of this code: once the mouse moves away from the text, the calling program's "init ()" function to flash the glow. This example completes the code for the layer tag as follows:

〈div id= "Bob" style= "Position:absolute; width:572px; height:35px; Z-index:1 "class=" Glow1 "onmouseover=" Stopflash (This) onmouseout= "Init ()"

3. Insert such a JavaScript program between 〈head〉 and 〈/head〉:

〈script〉

〈!--

function init ()//Halo starts flashing

{

Makeflash (Bob);

}

function Makeflash (obj)

{

Obj.flashtimer=setinterval ("bob.filters.glow.enabled=!bob.filters.glow.enabled", 1000)

///Here "1000" is the blink of time, in milliseconds, in this case is set to 1000 milliseconds (that is, 1 seconds), can be modified as needed.

function Stopflash (obj)//Halo stop flashing

{clearinterval (Obj.flashtimer)

}

--〉

〈/script〉
4, in the Web page source code 〈body〉 tag to add such a piece of code: onload= "init ()". The function of this code is that when the Web page is loaded, the halo begins to blink.

At this point, the end of the production, press F12 can see the expected effect.

The color of the flare and the length of the flare can be changed by modifying the parameter values in the CSS filter, and the time interval of the flare flicker can be adjusted by modifying the interval time values in JavaScript. If you insert a picture in a layer (which is better for a transparent background gif), it becomes a halo flicker on the edge of the picture.