Skillfully using CSS to make controllable flicker effect

Source: Internet
Author: User
Tags add filter insert requires time interval
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.



Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.