CSS3熱身實戰--過渡與動畫（實現炫酷下拉，手風琴，無縫滾動）

時間 2019-11-05

標籤 css3 css 熱身實戰過渡動畫實現下拉手風琴無縫滾動欄目 CSS 简体版

原文原文鏈接

1.前言

在本身的專欄上寫了十幾篇文章了，都是與js有關的。暫時尚未寫過關於css3的文章。css3，給個人感受就是，不難，可是很難玩轉自如。今天，就用css3來實現三個特效，但願這三個特殊能讓你們受到啓發，利用css3作出更好，更炫的動畫效果，而且對比這三個特效和JS特效的對比，但願能幫助到是你們學到CSS3的一些知識。今天這三個案例能夠說是一個預習或者熱身吧，之後也會寫關於CSS3更好的做品或者文章，最近我也是在編寫一個css3的動畫庫！css

這幾個實例，摘自我本身的日常練習的項目，代碼已經提到github上面了(css3-demos)。歡迎你們star。html

2.過渡與動畫概念理解

css3過渡

化用菜鳥教程的說法，CSS3過渡是元素從一種樣式逐漸改變爲另外一種的效果。要實現這一點，必須規定兩項內容：1.指定要添加效果的CSS屬性。2.指定效果的持續時間。css3

css3動畫

化用菜鳥教程的說法，CSS3動畫是根據@keyframes規則內指定一個CSS樣式和動畫將逐步從目前的樣式更改成新的樣式。指定至少這兩個CSS3的動畫屬性綁定向一個選擇器：1.規定動畫的名稱。2.規定動畫的時長。git

3.過渡案例-炫酷下拉

3-1原理分析

1.首先就是一個導航下拉，就是鼠標放上去出現一個下拉列表
2.而後發現，下拉里面，每個選項是從不一樣的兩個方向出現的
3.出現的方式是奇數項從左邊進，偶數項從右邊進，進入方式是滑動淡入。程序員

3-2實現過程

1.首先頁面的佈局，這個應該你們都知道，菜單無非就是一個ul-li列表，下拉列表就是li下面的一個ul-li。github

reset.css（樣式重置表和我的經常使用樣式封裝）數組

*{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}ol,ul{list-style:none}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:400}fieldset,img{border:0}textarea{resize:none}a{color:#000;text-decoration:none}.fontsize24,h1{font-size:24px}.fontsize20,h2{font-size:20px}.fontsize18,h3{font-size:18px}.fontsize16,h4{font-size:16px}.fontsize14,h5{font-size:14px}.fontsize12,h6{font-size:12px}.bold{font-weight:700}.fllil li{float:left}.fllir li{float:right}.fl{float:left}.fr{float:right}.radius{border-radius:100%}.positionCenterLeft{left:0;right:0;margin:auto}.positionCenterTop{top:0;bottom:0;margin:auto}.positionCenter{top:0;bottom:0;left:0;right:0;margin:auto}.distable{display:table}.distablecell{display:table-cell;vertical-align:middle}.textels{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.marginCenter{margin:0 auto}.t_l{text-align:left}.t_c{text-align:center}.t_r{text-align:right}.unLine{text-decoration:underline}.fiexd{position:fixed}.absolute{position:absolute}.relative{position:relative}.wrapper{clear:both;overflow:hidden}.o-hidden{overflow:hidden}.hidden{display:none}.block{display:block}.lblock{display:inline-block}.clear{clear:both}.pointer{cursor:pointer}img{border:0;vertical-align:middle}

html代碼以下微信

<div class="demo-nav">
    <!--.fllil,.clear是在樣式重置表（reset.css）上寫好的樣式，.fllil li{fload:left;}.clear{clear:both;}-->
    <ul class="menu fllil">
        <li>HTML5
            <ul class="sub-menu">
                <li>article</li>
                <li>section</li>
                <li>menu</li>
                <li>nav</li>
            </ul>
        </li>
        <li>CSS3
            <ul class="sub-menu">
                <li>動畫</li>
                <li>過渡</li>
                <li>圓形</li>
                <li>邊框</li>
            </ul>
        </li>
        <li>Javascript
            <ul class="sub-menu">
                <li>字符串</li>
                <li>數組</li>
                <li>對象</li>
                <li>布爾</li>
            </ul>
        </li>
        <li>Jquery
            <ul class="sub-menu">
                <li>動畫</li>
                <li>特效</li>
                <li>AJAX</li>
            </ul>
        </li>
        <li>VUE</li>
    </ul>
    <div class="clear"></div>
</div>

css代碼以下css3動畫

.demo-nav {
        width: 500px;
        margin: 0 auto;
    }

    .demo-nav li {
        line-height: 40px;
        padding: 0 10px;
        background: #09f;
        color: #fff;
        position: relative;
    }

    .demo-nav li ul {
        position: absolute;
        left: 0;
        top: 40px;
        height: 0;
        overflow: hidden;
    }

    .demo-nav li ul li {
        float: none;
        /*過渡代碼*/
        transition: all .3s;
        background: #f90;
        opacity: 0;
    }
    /*奇數項初始往右邊偏移100%*/
    .demo-nav li ul li:nth-of-type(1n) {
        transform: translate3d(100%, 0, 0);
    }
    /*偶數項初始往左邊偏移100%*/
    .demo-nav li ul li:nth-of-type(2n) {
        transform: translate3d(-100%, 0, 0);
    }

    .demo-nav li:hover ul {
        overflow: visible;
    }
    /*透明度和互動同時進行*/
    .demo-nav li:hover ul li {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

注意1：在顯示下拉列表的操做上，剛開始隱藏子菜單ul的樣式，不能這樣寫 .demo-nav li ul{display:none;}。要這樣寫 .demo-nav li ul{height: 0;overflow:hidden;}，鼠標放上父級li的時候，顯示ul不能這樣寫 .demo-nav li:hover ul{display:block;}，要這樣寫， .demo-nav li:hover ul{overflow: visible;}由於一開始若是子菜單ul是隱藏的，鼠標放到父級li的時候，子菜單ul就顯示出來，這樣是看到子菜單ul下面li的動畫的。

注意2：子菜單ul要用 .demo-nav li ul{height: 0;overflow:hidden;}隱藏，在顯示的時候再設置 .demo-nav li:hover ul{overflow: visible;}。這一步不能省，不然會出問題。若是不加，實際上子菜單ul，以及子菜單 ul下面的 li一直在頁面上，若是鼠標移上去子菜單 ul，以及子菜單 ul下面的 li。那麼實際上也會觸發父級 li的 hover。

3-3與JS實現對比

這個效果js也是能實現，實現上也不難，無非就是調用定時器的問題。可是寫的確定比css3多，邏輯也會比css3複雜。
1.首先，父級li必需要綁定一個鼠標移出和移入事件，也要定義一個屬性，記錄定時器（不一樣的父級li不能共用一個定時器，否則會受到干擾，必須每個父級li下面都要有一個屬性記錄定時器）。obj.timer=setInterval(function(){},100)
2.用js實現，實際上也是操做class或者css。因此性能上css3是比js好！
3.針對這個動畫，css3也比js好控制。app

3-4完整代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ec-css導航欄</title>
    <link rel="stylesheet" href="reset.css">
    <style>
        .demo-nav {
            width: 500px;
            margin: 0 auto;
        }

        .demo-nav li {
            line-height: 40px;
            padding: 0 10px;
            background: #09f;
            color: #fff;
            position: relative;
        }

        .demo-nav li ul {
            position: absolute;
            left: 0;
            top: 40px;
            /*height: 0;*/
            /*overflow: hidden;*/
        }

        .demo-nav li ul li {
            float: none;
            transition: all .3s;
            background: #f90;
            opacity: 0;
        }

        .demo-nav li ul li:nth-of-type(1n) {
            transform: translate3d(100%, 0, 0);
        }

        .demo-nav li ul li:nth-of-type(2n) {
            transform: translate3d(-100%, 0, 0);
        }

        .demo-nav li:hover ul {
            /*overflow: visible;*/
        }

        .demo-nav li:hover ul li {
            opacity: 1;
            transform: translate3d(0, 0, 0);
        }
        /*最多10級，超過10級的，得寫js*/
        .demo-nav li ul li:nth-of-type(2) {
            transition-delay: .1s;
        }

        .demo-nav li ul li:nth-of-type(3) {
            transition-delay: .2s;
        }

        .demo-nav li ul li:nth-of-type(4) {
            transition-delay: .3s;
        }
        .demo-nav li ul li:nth-of-type(5) {
            transition-delay: .4s;
        }

        .demo-nav li ul li:nth-of-type(6) {
            transition-delay: .5s;
        }

        .demo-nav li ul li:nth-of-type(7) {
            transition-delay: .6s;
        }
        .demo-nav li ul li:nth-of-type(8) {
            transition-delay: .7s;
        }

        .demo-nav li ul li:nth-of-type(9) {
            transition-delay: .8s;
        }

        .demo-nav li ul li:nth-of-type(10) {
            transition-delay: .9s;
        }
    </style>
</head>
<body>
<div class="demo-nav">
    <ul class="menu fllil">
        <li>HTML5
            <ul class="sub-menu">
                <li>article</li>
                <li>section</li>
                <li>menu</li>
                <li>nav</li>
            </ul>
        </li>
        <li>CSS3
            <ul class="sub-menu">
                <li>動畫</li>
                <li>過渡</li>
                <li>圓形</li>
                <li>邊框</li>
            </ul>
        </li>
        <li>Javascript
            <ul class="sub-menu">
                <li>字符串</li>
                <li>數組</li>
                <li>對象</li>
                <li>布爾</li>
            </ul>
        </li>
        <li>Jquery
            <ul class="sub-menu">
                <li>動畫</li>
                <li>特效</li>
                <li>AJAX</li>
            </ul>
        </li>
        <li>VUE</li>
    </ul>
    <div class="clear"></div>
</div>
</body>
</html>

4.過渡案例-手風琴

4-1原理分析

這個看着就不難，也是一個ul-li，鼠標移入li，li下面的標題顏色，背景色，箭頭改變，li下面的div的高度改變！

4-2實現過程

1.首先，排版ul-li，li下面又有一個標題（這個用h3）,和內容（div）

html以下

<div class="demo-slide-tab">
    <ul>
        <li>
            <h3>title 1</h3>
            <div>content1</div>
        </li>
        <li>
            <h3>title 2</h3>
            <div>content2conte nt2content2content2content2conten t2content2content2content2content2conte nt2content2content2content2conte nt2content2content2content2 content2content2content 2content2content2content2content2conten t2content2c ontent2content2content2</div>
        </li>
        <li>
            <h3>title 3</h3>
            <div>content3</div>
        </li>
        <li>
            <h3>title 4</h3>
            <div>content4.</div>
        </li>
    </ul>
</div>

css代碼以下

<style>
    .demo-slide-tab {
        width: 500px;
        margin: 0 auto;
    }

    .demo-slide-tab ul {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .demo-slide-tab li {
        list-style: none outside none;
        display: block;
        margin: 0;
        padding: 0;
        height: 40px;
        width: 100%;
        overflow: hidden;
        background: #f0f0f0;
        transition: height 0.3s ease-in-out;
    }

    .demo-slide-tab h3 {
        margin: 0;
        padding: 10px;
        height: 19px;
        border-top: 1px solid #f0f0f0;
        color: #000;
        background: #ccc;
        background: linear-gradient(#0099ff, #71d1fd);
        custor: pointer;
        position: relative;
    }

    .demo-slide-tab h3:before {
        content: "";
        border-width: 5px;
        border-color: transparent transparent transparent #000;
        position: absolute;
        right: 10px;
        top: 15px;
        width: 0;
        height: 0;
    }

    .demo-slide-tab div {
        margin: 0;
        voerflow: auto;
        padding: 10px;
        max-height: 220px;
    }
    //鼠標移入li，高度改變
    .demo-slide-tab li:hover {
        height: 280px;
    }
    //鼠標移入li，h3背景顏色和字體顏色改變
    .demo-slide-tab li:hover h3 {
        color: #fff;
        background: #000;
        background: linear-gradient(#faa305, #fcc054);
    }
    //鼠標移入li，箭頭方向改變
    .demo-slide-tab li:hover h3:before{
        border-color: transparent transparent transparent #fff;
        transform: rotate(90deg);
    }
</style>

因爲這栗子，li裏面的div在樣式上，設置了padding。因此建議個人作法是改變li設置overflow: hidden;height:40px;/*高度等於標題的高度，初始就是隱藏div*/。由於若是鼠標移入li，是操做div的話。
會有一個小問題！以下栗子！

部分代碼改爲以下

.demo-slide-tab li {
    display: block;
    margin: 0;
    padding: 0;
    width: 100%;
    background: #f0f0f0;
}
.demo-slide-tab div {
    margin: 0;
    height: 0;
    overflow: hidden;
    transition: height 0.3s ease-in-out;
}
.demo-slide-tab li:hover div {
    padding: 10px;
    height: 220px;
}

你們看能夠看到，鼠標移出的那一瞬間，看到div裏面的內容也貼邊了！我就是爲了不這個，才經過操做li的高度來控制div的高度！

4-3與JS實現對比

1.這個動畫，我感受雖然性能上css3是比js要好一些。畢竟js也是控制css或者class來實現！
2.靈活性的話，這個就要比js差了，好比div的顯示與隱藏，我不想經過鼠標移入移出的方式控制，若是我想經過點擊的方式控制div的顯示與隱藏呢。對於js的方式來講，這個就是觸發的事件就能夠了，對於插件來講，可能就改一個插件就好了！對於css3實現的話，這個就不但要改css樣式了，也要改html結構了！
這裏，個人建議就是，這個動畫最理想的仍是用js和css3結果，結果是最好的。若是針對靈活性不高的需求，能夠只用css3。

4-4完整代碼

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ec-css手風琴</title>
<link rel="stylesheet" href="reset.css">
<style>
    .demo-slide-tab {
        width: 500px;
        margin: 0 auto;
    }

    .demo-slide-tab ul {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .demo-slide-tab li {
        list-style: none outside none;
        display: block;
        margin: 0;
        padding: 0;
        height: 40px;
        width: 100%;
        overflow: hidden;
        background: #f0f0f0;
        transition: height 0.3s ease-in-out;
    }

    .demo-slide-tab h3 {
        margin: 0;
        padding: 10px;
        height: 19px;
        border-top: 1px solid #f0f0f0;
        color: #000;
        background: #ccc;
        background: linear-gradient(#0099ff, #71d1fd);
        custor: pointer;
        position: relative;
    }

    .demo-slide-tab h3:before {
        content: "";
        border-width: 5px;
        border-color: transparent transparent transparent #000;
        position: absolute;
        right: 10px;
        top: 15px;
        width: 0;
        height: 0;
    }

    .demo-slide-tab div {
        margin: 0;
        voerflow: auto;
        padding: 10px;
        max-height: 220px;
    }

    .demo-slide-tab li:hover {
        height: 280px;
    }

    .demo-slide-tab li:hover h3 {
        color: #fff;
        background: #000;
        background: linear-gradient(#faa305, #fcc054);
    }

    .demo-slide-tab li:hover h3:before{
        border-color: transparent transparent transparent #fff;
        transform: rotate(90deg);
    }
</style>
</head>
<body>
<div class="demo-slide-tab">
    <ul>
        <li>
            <h3>title 1</h3>
            <div>content1</div>
        </li>
        <li>
            <h3>title 2</h3>
            <div>content2conte nt2content2content2content2conten t2content2content2content2content2conte nt2content2content2content2conte nt2content2content2content2 content2content2content 2content2content2content2content2conten t2content2c ontent2content2content2</div>
        </li>
        <li>
            <h3>title 3</h3>
            <div>content3</div>
        </li>
        <li>
            <h3>title 4</h3>
            <div>content4.</div>
        </li>
    </ul>
</div>
</body>
</html>

5.動畫案例-無縫滾動

如上圖，無縫滾動也稱跑馬燈，就是一些內容，而後向左移動。鼠標放上去的時候，動畫中止！交互就這樣，下面來看實現過程！

5-1原理分析

1.首先，初始狀態就是以下圖，而後向右慢慢移動（黑框部分爲可視區域）

2.可是這樣，滾動到最後一張的時候，就會出現問題！以下圖

3.因此正確的姿式應該是，這樣就須要對滾動內容進行復制一次了！

4.但仍是避免不了第二步的問題

5.這裏就須要作一步了，就是在剛滾動到下輪第一張的時候。以下圖（用這個案例說，不包括複製出來的4個li，就總共有4個，每一個200px，那麼就是方ul滾動了800px的時候）

6.滾動到這裏，就瞬間拉回來，回到原來的位置，再進行滾動操做（當ul滾動了800px的時候，瞬間拉回原來位置，至關於尚未開始滾動）

5-2實現過程

1.首先佈局，就是在一個黑框就是一個div,橙色裝着1234的就是ul-li佈局！
看下面的代碼註釋，再結合上面的原理，你們就很好理解了！

html代碼以下

<div class="demo-marquee">
    <ul class="fllil">
        <li><img src="image/1.jpg"/>
        </li>
        <li><img src="image/2.jpg"/>
        </li>
        <li><img src="image/3.jpg"/>
        </li>
        <li><img src="image/4.jpg"/>
        </li>
        <!--下面的四個li是複製內容-->
        <li><img src="image/1.jpg"/>
        </li>
        <li><img src="image/2.jpg"/>
        </li>
        <li><img src="image/3.jpg"/>
        </li>
        <li><img src="image/4.jpg"/>
        </li>
    </ul>
    <div class="clear"></div>
</div>

css代碼

<style>
    .demo-marquee {
        width: 400px;
        margin: 20px auto;
        overflow: hidden;
    }

    .demo-marquee ul {
        /*這個案例ul寬度應該爲li個數*li寬度*/
        width: 1600px;
        /*執行動畫*/
        animation: ec-marquee-move 6s infinite linear;
    }

    .demo-marquee ul:hover {
        /*鼠標放上去的時候，動畫暫停*/
        animation-play-state: paused;
    }
    /*定義動畫*/
    /*當向左滾動了800px的時候，這個時候結束，而後順便回到起點，進行下一次的動畫*/
    @keyframes ec-marquee-move {
        0% {
            transform: translateX(0px);
        }
        100% {
            transform: translateX(-800px);
        }
    }
</style>

5-3與JS實現對比

1.這個動畫，性能上固然是css3比較好，而靈活性上也確定是。好比作到下面這個圖這樣效果。點擊左右箭頭切換方向！

還有一個就是，好比上面案例中，li的個數是變化的，那麼ul的寬度也是要用js計算，以及ul的內容要進行復制的話，以程序員的思惟，理應也是用js，而不是手動複製！

2.因此，這個動畫，建議的仍是用js和css3結合使用，這樣結果最好，性能上和靈活上都獲得折中，性價比無疑是最好的！

5-4完整代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ec-css無縫滾動</title>
    <link rel="stylesheet" href="reset.css">
    <style>
        .demo-marquee {
            width: 400px;
            margin: 20px auto;
            overflow: hidden;
        }

        .demo-marquee ul {
            width: 1600px;
            animation: ec-marquee-move 6s infinite linear;
        }

        .demo-marquee ul:hover {
            animation-play-state: paused;
        }

        @keyframes ec-marquee-move {
            0% {
                transform: translateX(0px);
            }
            100% {
                transform: translateX(-800px);
            }
        }
    </style>
</head>
<body>
<div class="demo-marquee">
    <ul class="fllil">
        <li><img src="image/1.jpg"/>
        </li>
        <li><img src="image/2.jpg"/>
        </li>
        <li><img src="image/3.jpg"/>
        </li>
        <li><img src="image/4.jpg"/>
        </li>
        <li><img src="image/1.jpg"/>
        </li>
        <li><img src="image/2.jpg"/>
        </li>
        <li><img src="image/3.jpg"/>
        </li>
        <li><img src="image/4.jpg"/>
        </li>
    </ul>
    <div class="clear"></div>
</div>
</body>
</html>

5.總結

關於css3，個人開發小原則就是能用css3解決的，我不會寫js，可是若是要寫js的，我也不會吝嗇到不寫js，只用css3寫出退而求之的效果！css3跟js搭配，能作出不少意想不到的震撼效果，這個就得看你們腦洞有多大了！
好了，今天經過三個案例帶你們初步認識了css3的過渡和動畫。但願能給你們起一個熱身的做用，或者是你們看了這三個案例，知道怎麼去開發其它的案例，發散思惟！可是這個只是css3過渡和動畫的冰山一角而已，css3就算沒有其餘的新特性，就說過渡和動畫，魅力就足夠大，你們也能夠到網上搜下css3的案例！就知道css3的魅力了！關於css3的新特性，之後我會繼續寫文章。
最後仍是那句老話，若是以爲我哪裏寫得很差，寫錯了，歡迎指點！讓你們相互學習，相互幫助！

-------------------------華麗的分割線--------------------
想了解更多，關注關注個人微信公衆號：守候書閣

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。