Skillfully using CSS to make controllable flicker effect

css| Flashing

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 used on content that requires special attention ...
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. Take a look at the following effect chart:

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. The idea is: the use of CSS "Glow" filter to produce halo effect, using the properties of CSS can dynamically change the characteristics of a small JavaScript program to every second to change the value of the property, so as to achieve the effect of flashing, The JavaScript program is then invoked with two events (onmouseover and onmouseout) to control flicker.
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= #00ff00, strength=5, Enabled=0)}
--〉
〈/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:, the function of this code is: once the mouse is moved to the text, the calling program's "Stopflash (This)" function to stop flashing, the function of this code: once the mouse moves the text, will invoke the program's "Init ()" function to make the glow flicker. 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 "
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)
}
file://--〉
〈/script〉
4, in the Web page source code 〈body〉 tag to add such a section of code:. 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.