A text or image with the flashing effect controlled by CSS has a halo around it, which flashes every second. When the mouse moves above, it stops flashing immediately, the blinking continues when you move the mouse 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, and use the CSS attribute to dynamically change the attribute value, using a small javascript program to change the attribute value every second, to achieve the flickering effect, use two events (onmouseover and onmouseout) to call the Javascript program to control whether to flash.
Production method:
1. Create a Glow filter. For details about how to set the CSS Filter, see "CSS Filter Application Tips. There are no duplicates here. If you are not using Dreamweaver, copy the following code to the
<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:
<P 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.