CSS can make a very interesting effect on the background of a tag. 1th/2 Page _ Experience Exchange

Source: Internet
Author: User
This effect is an effect that someone wrote to me today, before remembering to write a similar effect with the background of a tag. So just came back to write a bit of the effect he asked! By the way to share with you, if you are very creative, then you will be able to make more interesting results.

He proposed the effect, is nine days music home a flash of the effect, to use CSS to imitate the same effect, may be because you do not want to use flash or SEO and other purposes. So with FW made two GIF pictures, to imitate the effect, because it is a test, so many aspects of the picture is not considered particularly fine. Some rough, but it seems to have a little meaning, hehe ...

First of all: A:link, a:visited, A:hover, a:active: Some people may say I this is nonsense, but if it is novice see this, will be very useful, others tell you things, always than self-awareness half faster.

Copy the Code code as follows:


a:link{}
a:visited {}
a:hover {}
a:active {}



The above statement defines the style of "mouse down" when the "normal link", "Visited link", "mouse over" is defined separately.

For beginners, it is important to note that in the writing process, the order of the four lines must be written in the upper order, otherwise the results will be different from the expected. The simple memory aspect is "LVHA". Love ha.

Here are two images to use for this effect:

Here is the CSS section:

Copy the Code code as follows:




Here is the Layout section:
Program code

Copy the Code code as follows:




Here are the effects:


[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]

  • 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.