首頁 > 開發者 > JavaScript

CSS3學習筆記（4）—上下滑動展開的按鈕，css3學習筆記

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

CSS3學習筆記（4）—上下滑動展開的按鈕，css3學習筆記

好吧，我最近沒有什麼進步，其實吧，我在偷懶耶，這幾天太冷落代碼了，都在做設計，暈乎乎的，

下面來看看我以前寫的一個上下滑動展開的按鈕效果：

這類的效果經常會在一些網站頁面下載按鈕處看到，當你滑鼠懸浮在下載按鈕時，會提醒你是否登入，或者點擊登入什麼的小提示~~~~~

 

 

一、頁面的主體布局

<!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動畫效果設定結束*/

原理我已經說的很清楚了，配合上面的程式應該很容易看出來吧~~~~~

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More