CSS can use the background of the A tag to create interesting effects. Page 1/2_Experience exchange

This effect is an effect that someone wrote to me today and asked me about it. I have written a similar effect before using the background of the A tag. So I just came back and wrote down the effects he requested! By the way, I would like to post it to share with you. If you are very creative, then you will definitely be able to create more interesting effects.

The effect he proposed is the effect of a FLASH on the home page of Jiutian Music. He needs to use CSS to imitate the same effect, probably because he does not want to use FLASH or SEO. So I used FW to make two GIF pictures to simulate this effect. Since it was for testing, many aspects such as the pictures were not considered in detail. It's a bit rough, but it still looks interesting, haha...

First of all: a:link, a:visited, a:hover, a:active: Some people may say that this is Nonsense, but if a novice sees this, it will be very useful. What others tell you will always be faster than understanding it on your own.

Copy code The code is as follows:

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

The above statements respectively define the styles of "normal links", "visited links", "when the mouse is over" and "when the mouse is clicked".

For novices, you must pay attention here. During the writing process, the order of these four lines must be written in the order above, otherwise the displayed effect will be different from expected. The simple memory aspect is "LVHA". love ha.

The following are the two images used to create this effect:

The following is the CSS part:

Copy code The code is as follows:

The following is the layout part:
Program code

Copy code The code is as follows:

The following is the effect:

[Ctrl A Select all Note: If you need to introduce external Js, you need to refresh it before it can be executed. ]