CSS3 learning notes (4)-slide up and down buttons, css3 learning notes

CSS3 learning notes (4)-slide up and down buttons, css3 learning notes

Well, I haven't made any progress recently. Actually, I'm just being lazy. I 've been so cool at code these days. I 've been designing and dizzy,

Next let's take a look at a button that I wrote previously, sliding up and down to expand the effect:

This type of effect is often seen in some website page download buttons. When you hover the mouse over the Download button, it will remind you whether you have registered, or click the logon tips ~~~~~

 

 

I. Page subject layout

<! DOCTYPE html> 
The layout is simple ~~~~~
 
 
Ii. CSS style (mainly CSS3)
Let's talk about the principle of Animation:
(1) Layout first. I will sort out three divs in parallel, for example:

(2) place the two child buttons of sild_top and sild_bottom below the button of the tag, and use the z-index attribute in positioning.
(3) then, the two child buttons of sild_top and sild_bottom are moved to the front and bottom of the tag button.
(4) set an animation for the two child buttons of sild_top and sild_bottom.
. Both_sild_menu {text-align: center; width: 300px ;}. both_sild_menu. sild_top {text-decoration: none; padding: 10px; background-color: # 6c987e; border-radius: 10px 10px 0 0; /* place it at the bottom of both_sild_menu a and hide it */transform: translate (0, 40px); opacity: 0; /* put it at the bottom and make it transparent to 0. */position: relative; z-index: 1;} is not displayed ;}. both_sild_menu a {display: block; text-decoration: none; padding: 10px; background-color: #7 eedaa; position: relative; z-index: 2; /* place it at the top */}. both_sild_menu. sild_bottom {text-decoration: none; padding: 10px; background-color: # 6c987e; border-radius: 0 0 10px 10px; /* place it at the bottom of both_sild_menu a and hide it */opacity: 0; transform: translate (0,-40px); position: relative; z-index: 1 ;}. both_sild_menu. sild_top ,. both_sild_menu. sild_bottom {/* set the animation attribute for the two divs */transition: all 0.2 s bytes-in-out 0 s;-moz-transition: all 0.2 s records-in-out 0 s;-ms-transition: all 0.2 s records-in-out 0 s;-o-transition: all 0.2 s bytes-in-out 0 s;-webkit-transition: all 0.2 s bytes-in-out 0 s ;} /* The div animation effect setting named sild_top starts */. both_sild_menu: hover. sild_top {/* When the mouse is hovering over the frame, the transparency of the div named sild_top is changed to 1 */opacity: 1 ;}. both_sild_menu: hover. sild_top {/* move the div named sild_top from the initial Y axis 40px to the 0px position on the Y axis */transform: translate (0, 0);-moz-transform: translate ();-o-transform: translate ();-ms-transform: translate ();-webkit-transform: translate );} /* The div animation effect set "sild_top" ends. * // * The div animation effect set "sild_bottom" starts */. both_sild_menu: hover. sild_bottom {opacity: 1 ;}. both_sild_menu: hover. sild_bottom {transform: translate (0, 0);-moz-transform: translate (0, 0);-o-transform: translate (0, 0);-ms-transform: translate (0, 0 ); -webkit-transform: translate ();}/* ends the div animation effect setting with the name of sild_bottom */
I have already made it very clear about the principle. It should be easy to see how it works with the above program ~~~~~