最近寫了一個動畫,下面來看看我以前寫的一個上下滑動展開的按鈕效果：
這類的效果經常會在一些網站頁面下載按鈕處看到，當你鼠標懸浮在下載按鈕時，會提醒你是否已注冊，或者點擊登錄什么的小提示~~~~~
一、頁面的主體布局
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link type="text/css" rel="stylesheet" href="css/both_slid_menu.css" /> </head> <body> <div class="both_sild_menu"> <div class="sild_top">我是上面</div> <a href="#" target="_blank">鼠標放在我上面試試</a> <div class="sild_bottom">我是下面</div> </div> </body> </html>
布局就不多說了，很簡單.
二、CSS樣式（主要是CSS3）
先說一下動畫的原理：
（1）先來布局，我是將三個DIV並列排出來，如下圖：
（2）把sild_top和sild_bottom的兩個子級按鈕置於a標簽按鈕的下方，用定位里面的z-index屬性
（3）然后sild_top和sild_bottom的兩個子級按鈕進行位移到a標簽按鈕正下方
（4）為sild_top和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;
/*讓它的位置在名為both_sild_menu a的底部，且隱藏起來*/
transform: translate(0,40px);
opacity: 0; /*置於底部后再讓它透明度為0，不顯示*/
position: relative;
z-index: 1;
}
.both_sild_menu a{
display: block;
text-decoration: none;
padding: 10px;
background-color: #7eedaa;
position: relative;
z-index: 2; /*讓它的位置在頂部*/
}
.both_sild_menu .sild_bottom{
text-decoration: none;
padding: 10px;
background-color: #6c987e;
border-radius: 0 0 10px 10px;
/*讓它的位置在名為both_sild_menu a的底部，且隱藏起來*/
opacity: 0;
transform: translate(0,-40px);
position: relative;
z-index: 1;
}
.both_sild_menu .sild_top,.both_sild_menu .sild_bottom{ /*給兩個DIV設置動畫的屬性*/
transition: all 0.2s ease-in-out 0s;
-moz-transition: all 0.2s ease-in-out 0s;
-ms-transition: all 0.2s ease-in-out 0s;
-o-transition: all 0.2s ease-in-out 0s;
-webkit-transition: all 0.2s ease-in-out 0s;
}
/*名為sild_top的div動畫效果設置開始*/
.both_sild_menu:hover .sild_top{ /*當鼠標懸浮在框架上時，將名為sild_top的div透明度變為1*/
opacity: 1;
}
.both_sild_menu:hover .sild_top{ /*當鼠標懸浮在框架上時，將名為sild_top的div從初始的Y軸40px移動到Y軸0px位置*/
transform: translate(0,0);
-moz-transform: translate(0,0);
-o-transform: translate(0,0);
-ms-transform: translate(0,0);
-webkit-transform: translate(0,0);
}
/*名為sild_top的div動畫效果設置結束*/
/*名為sild_bottom的div動效果設置畫開始*/
.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(0,0);
}
/*名為sild_bottom的div動畫效果設置結束*/
原理我已經說的很清楚了，配合上面的程序應該很容易看出來吧.