1. 實例

2.HTML 代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3-Fade</title>
    <link rel="stylesheet" type="text/css" href="./fade.css">
</head>
<body>
    <div class="container">
        <div class="fade fade-in">
            fade-in
        </div>
        <div class="fade fade-top">
            fade-top
        </div>
        <div class="fade fade-bottom">
            fade-bottom
        </div>
        <div class="fade fade-left">
            fade-left
        </div>
        <div class="fade fade-right">
            fade-right
        </div>
        <div class="fade bounce-top">
            bounce-top
        </div>
        <div class="fade bounce-bottom">
            bounce-bottom
        </div>
        <div class="fade bounce-left">
            bounce-left
        </div>
        <div class="fade bounce-right">
            bounce-right
        </div>
        <div class="fade fade-center-out">
            fade-center-out
        </div>
        <div class="fade fade-center-in">
            fade-center-in
        </div>
        <div class="fade fade-middle-out">
            fade-middle-out
        </div>
        <div class="fade fade-middle-in">
            fade-middle-in
        </div>
    </div>
</body>
</html>

3.CSS 代碼

*{
    padding:0;
    margin:0;
}
html{
    background: -webkit-radial-gradient(#222222, #000000);
    background: radial-gradient(#222222, #000000);
    height: 100%;
    text-align: center;
    width:100%;
}

.container{
    width: 800px;
    margin: 200px auto;
    text-align: left;
}


.fade{
    cursor: pointer;
    box-sizing: border-box;
    display: inline-block;
    color: #09f;
    background: white;
    padding: 10px 20px;
    text-align: center;
    margin: 10px 0;
    /* 設置相對定位 */
    position: relative;
    transition: all 0.3s;
    /* 設置層次 會被before after在上面 */
    z-index:1;
}

.fade:hover{
    color: white;
}

/* 其實使用背景顏色變化就可以的 但是這裡為了做統一*/
.fade:before,.fade:after
{
    display: block;
    transition: all 0.3s;
    background: #09f;
    position: absolute;
    content: '';
    z-index: -1;
}

.fade-left:before,.fade-right:before,
.fade-center-out:before,.fade-center-out:after,
.fade-center-in:before,.fade-center-in:after,
.bounce-left:before,.bounce-right:before
{
    height: 100%;
    top:0;
    width:0;
}

.fade-middle-out:before,.fade-middle-out:after,
.fade-middle-in:before,.fade-middle-in:after,
.bounce-bottom:before
{
    height: 0;
    width: 100%;
    left:0;
}

/* 彈跳元素設置時間線 使用三次貝塞爾曲線 */
.bounce-top:before,.bounce-bottom:before,
.bounce-left:before,.bounce-right:before{
    transition-timing-function: cubic-bezier(0.52, 1.7, 0.5, 0.4);
}

.fade-in:before{
    height: 100%;
    width: 100%;
    opacity: 0;
    top:0;
    left: 0;
}

.fade-bottom:before, .fade-top:before,.bounce-top:before{
    height: 0;
    width: 100%;
    left: 0;
}
.fade-top:before,.bounce-top:before,.fade-middle-out:before{
    top:0;
}

.fade-bottom:before,.fade-middle-out:after,.bounce-bottom:before{
    bottom: 0;
}

.fade-left:before,.fade-center-in:before,.bounce-left:before{
    left:0;
}

.fade-right:before,.fade-center-in:after,.bounce-right:before{
    right:0;
}

.fade-center-out:before{
    right: 50%
}
.fade-center-out:after{
    left: 50%
}
.fade-middle-in:before{
    bottom:50%;
}
.fade-middle-in:after{
    top:50%;
}

.fade-in:hover:before{
    opacity: 1;
}

.fade-left:hover:before,.fade-right:hover:before,
.bounce-left:hover:before,.bounce-right:hover:before
{
    width: 100%;
}

.fade-top:hover:before,.fade-bottom:hover:before,
.bounce-top:hover:before,.bounce-bottom:hover:before{
    height: 100%;
}

.fade-center-out:hover:before,.fade-center-out:hover:after,
.fade-center-in:hover:before,.fade-center-in:hover:after{
    width:50%;
}
.fade-middle-out:hover:before,.fade-middle-out:hover:after,
.fade-middle-in:hover:before,.fade-middle-in:hover:after
{
    height:50%;
}

4. 練習

區別隻是 heigth屬性所設置的高度大小

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

App分享之微信微博等各個社交平臺的分享授權規則和常見問題

一、新浪微博分享規則新浪微博支持分享類型：應用內分享也就是網頁分享支持：文字，文字+圖片，要分享鏈接需要鏈接添加在text里分享客戶端分享支持：文字，圖片，文字+圖片，圖片+文字+鏈接參數說明：text：不能超過140個漢字image：圖片最大不超過5M，僅支持JPEG、GIF、PNG格式 ...
iOS 使用腳本自動化複製target

有些項目成熟以後，就會有需求自動化配置生成一個全新的項目，不需要再讓開發人員手動修改工程文件，將配置化工作直接移交給運維或者配置團隊去做其實按照普通的做法，無非就是在xcode里將目標target duplicate一下，然後修改相關的項目名稱、target名稱、bundleid等等，這些內容其實 ...
自定義可擴展疊加頭部的下拉控制項

最近寫了個下拉控制項，和幾個下拉的頭部樣式，下拉控制項可以連續添加疊加幾個頭部視圖下麵是沒有添加任何頭部尾部的視圖下拉效果一步一步來介紹，先介紹這個下拉效果，在介紹自定義的頭部首先在使用上，和普通的控制項沒有兩樣，拿recyclerview來做例子，因為recyclerview使用比較多，而且可以替 ...
.net程式員做的第一個安卓APP

我從畢業之後一直做的是ASP.NET，從畢業到現在都已經五六個年頭了。一個事物接觸久了就會慢慢沒有了新鮮感熱情也褪去的差不多了，我又是對新事物比較感興趣的，雖說Android早就不算什麼新事物，當對於沒接觸過JAVA語言，沒學過手機開發可以說是零基礎的自己來說絕對是一個全新的領域。決定開始學習An ...
Android開發--菜單與消息提醒

本章目標一、瞭解Android菜單類型二、掌握選項菜單使用三、掌握上下文菜單使用四、掌握消息通知Toast組件五、掌握狀態欄通知Notification組件一、Android菜單 Android菜單可以分為三種： 1、選項菜單 2、上下文菜單 3、子菜單選項菜單： 1、Android設 ...
Mac中配置nvm

1、安裝 nvm curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash 安裝成功預設將會在用戶文件夾中生成一個隱藏的 .nvm 文件顯示隱藏文件：defaults write com. ...
一道前端學習題

對於沒參加過互聯網企業招聘，或是沒有參加過大型互聯網企業招聘的人來說，能以這些公司的面試題做為鍛煉，無疑是一種非常好的學習和進步的途徑。下麵是一道騰訊的前端面試題(JS解答)，題目本身在現實中意義不大，主要是考察應試者對js及演算法的理解程度，本文給出了三種答案，期待有更大的俠來一試身手，做出更好的解 ...
dataset的使用和圖片延時載入的實現

首先，先介紹一下關於javascript中dataset屬性。。html5中可以使用data-首碼設置我們需要的自定義屬性,來進行一些數據的存放。下麵是元素應用data屬性的一個例子:~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ...