Animation buttons for images and CSS

Source: Internet
Author: User

Most of the time, you can see that the buttons in FLASH can be animated, while most buttons made in HTML are switched to a single frame. In fact, it is also feasible to make animations.
Let's take a look at the preview image below.
Move the mouse up, click, and move the mouse away
The following is the actual result. Try it yourself.

The code is as follows: Copy code
. Temp1 a {display: block; height: 31px; width: 88px; background-image: url (/articleimg/2006/11/4252/06 .gif )}
. Temp1 a: hover {background-image: url (/articleimg/2006/11/4252/07 .gif )}
. Temp1 a: active {background-image: url (/articleimg/2006/11/4252/08 .gif )}
. Temp2 a {display: block; height: 31px; width: 88px; background-image: url (/articleimg/2006/11/4252/03 .gif )}
. Temp2 a: hover {background-image: url (/articleimg/2006/11/4252/04 .gif )}
. Temp2 a: active {background-image: url (/articleimg/2006/11/4252/05 .gif )}
A {display: block; height: 31px; width: 88px; background-image: url (Figure 1 )}
A: hover {background-image: url (Figure 2 )}
A: active {background-image: url (figure 3 )}

In fact, the most important thing is that the animation image itself

First, let's take a look at this image.
We use the pseudo HOVER and active link objects to simulate the pointer passing and pressing effect in FLASH. In fact, there are still some differences. In addition, the popped button is the normal state of link.
Let's take a look at the animation itself. In the second example, there are three images.
Figure 1 [click me]-> [thank you for your patronage]
Figure 2 [thank you for your patronage]-> [click me]
Figure 3 text sink to simulate Click Effect
When you move the mouse up, play the picture 2. Then the animation will automatically scroll to [click me].
Play the picture when you move the mouse away. 1 The animation will automatically scroll to [thank you for your patronage]
Play the picture when you click the mouse. 3.
The following describes how to create an animation for a button in Fireworks. The two images are source files that move the mouse over and away.
 
Open it. It's actually the same as a normal animation, but pay attention to a small detail.
Before exporting GIF animation, remember to select [do not loop] on the frame panel. Tips .....
Tips: The code is simply made of HTML and CSS. therefore, the effect is not very perfect. If HTML is used in combination with some javascript behaviors, you can completely simulate the four states of the flash button. however, we also need to see the drawbacks of this method. The picture is large and loading is slow. The first time you move the mouse up, there will be a missing effect.
Example package: source.rar

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.