CSS3 implements a Tooltip prompt box to fly in and out an animation

We have seen a lot of Tooltip boxes created using background images, but the disadvantage is that expansion is troublesome and images need to be changed frequently. There is also the use of multi-layer CSS stack implementation, but the effect is relatively stiff, the appearance is not very good. Today, I will share with you how to use CSS3 to quickly implement a beautiful and practical Tooltip prompt box, which is accompanied by an animated Effect of flying in and out. Let's take a look.

It looks simple. In fact, the idea of implementation is indeed very simple.

Next, we will briefly analyze the CSS3 Code implemented by this Tooltip.

The first step is the HTML code. It mainly constructs three small icon menus and the corresponding Tooltip prompt box content:

D Find important documents ents and manuals. A Take a look at our crew and become a friend. C lead e our process and see how we can help.

The following is the CSS code. First, we define an icon set so that each small button can display its own icons:

{:;:;:;:;:;}

{:;:;:;:;:;:;:;}

The focus is to implement the Tooltip prompt box:

{:;:;:;:;:;:;:;:;:;}{:;}{:;:;:;}{:;:;:; :;:;:;:;}

The Tooltip area is rendered with rounded corners and shadows, so that the mouse slides over and passes in, and the mouse moves out to fly out. We can see that this effect is mainly used.

-Webkit-transition and-moz-transition

Finally, a small downward arrow is marked with class. arrow. The above Code also implements this CSS.

Finally, provide a source code package for everyone,>