Flashing effect controlled by CSS

A text or image is surrounded by a circle of Halo, which flashes every second. When the mouse moves above, it immediately stops flashing and continues to flash when the mouse moves away. This effect can be applied to content that requires special attention (such as alerts and new content in reports.

The above example can achieve the above effect, because it is a captured image, cannot see the dynamic effect, as long as you follow the method described below, make a try, the effect is clear at a glance. The idea is to use the CSS "Glow" filter to generate a halo effect. The CSS attributes can be dynamically changed and a short JavaScript section is used.ProgramTo change the attribute value every second, so as to achieve the flickering effect, and then use two events (onmouseover and onmouseout) to call the Javascript program to control whether to flash.

Production method:

1. Create a Glow filter. For how to set the CSS Filter, see "CSS Filter Application Tips ".Article. There are no duplicates here. Do not use Dreamweaver.CodeCopy to webpageSource codeBetween

<Style type = "text/CSS"> "〉

<〈! --

. Glow1 {filter: glow (color = # ff0000, strengh = 2 )}

--> --〉

</Style> 〉

2. Insert a layer named Bob. Write a piece of text on the layer. Then, load a Glow filter on the layer and add two events to force the flashing to stop when the mouse moves over the text, and continue to flash when the mouse moves away the text. Code: onclick = "stopflash (this)". The function of this Code is to call the "stopflash (this)" function of the program to stop flashing; onmouseout = "Init ()", the function of this Code is to call the program's "Init ()" function to make the halo Flash once the mouse moves the text away. In this example, the Code marked by the layer is as follows:

<Div id = "Bob" style = "position: absolute; width: 572px; Height: 35px; Z-index: 1" class = "glow1" onmouseover = "stopflash (this) "onmouseout =" Init () "> ()"〉

3. Insert a javascript program between head and head:

<SCRIPT> 〉

<〈! --

Function Init () // The halo starts to flash.

{

Makeflash (Bob );

}

Function makeflash (OBJ)

{

OBJ. flashtimer = setinterval ("Bob. Filters. Glow. Enabled =! Bob. Filters. Glow. enabled ", 1000)

} // Here, "1000" is the flickering time, in milliseconds. In this example, it is set to 1000 milliseconds (that is, 1 second), which can be modified as needed.

Function stopflash (OBJ) // The halo stops flashing.

{Clearinterval (obj. flashtimer)

}

// --> //--〉

</SCRIPT> 〉
4. Add the code onload = "Init ()" in the "body" mark of the webpage source code ()". The function of this Code is that when a webpage is loaded, the Halo begins to flash.

Now, the production is over. Press F12 to see the expected results.

The color and length of the Halo can be changed by modifying the parameter values in the CSS Filter. The interval of the Halo Flashing can be adjusted by modifying the interval value in Javascript. If an image is inserted in a layer (the GIF image with a transparent background has a better effect), it turns into a halo flashing effect on the image edge.