CSS3熱身實(shí)戰(zhàn)--過渡與動(dòng)畫（實(shí)現(xiàn)炫酷下拉，手風(fēng)琴，無縫滾動(dòng)）

zqhxuyuan 發(fā)布于2019-08-29 13:03 / 2356人閱讀

摘要：規(guī)定動(dòng)畫的時(shí)長(zhǎng)。注意子菜單要用隱藏，在顯示的時(shí)候再設(shè)置。如果不加，實(shí)際上子菜單，以及子菜單下面的一直在頁面上，如果鼠標(biāo)移上去子菜單，以及子菜單下面的。

1.前言

在自己的專欄上寫了十幾篇文章了，都是與js有關(guān)的。暫時(shí)還沒有寫過關(guān)于css3的文章。css3，給我的感覺就是，不難，但是很難玩轉(zhuǎn)自如。今天，就用css3來實(shí)現(xiàn)三個(gè)特效，希望這三個(gè)特殊能讓大家受到啟發(fā)，利用css3做出更好，更炫的動(dòng)畫效果，并且對(duì)比這三個(gè)特效和JS特效的對(duì)比，希望能幫助到是大家學(xué)到CSS3的一些知識(shí)。今天這三個(gè)案例可以說是一個(gè)預(yù)習(xí)或者熱身吧，以后也會(huì)寫關(guān)于CSS3更好的作品或者文章，最近我也是在編寫一個(gè)css3的動(dòng)畫庫！

這幾個(gè)實(shí)例，摘自我自己的平常練習(xí)的項(xiàng)目，代碼已經(jīng)提到github上面了(css3-demos)。歡迎大家star。

2.過渡與動(dòng)畫概念理解 css3過渡

化用菜鳥教程的說法，CSS3過渡是元素從一種樣式逐漸改變?yōu)榱硪环N的效果。要實(shí)現(xiàn)這一點(diǎn)，必須規(guī)定兩項(xiàng)內(nèi)容：1.指定要添加效果的CSS屬性。2.指定效果的持續(xù)時(shí)間。

css3動(dòng)畫

化用菜鳥教程的說法，CSS3動(dòng)畫是根據(jù)@keyframes規(guī)則內(nèi)指定一個(gè)CSS樣式和動(dòng)畫將逐步從目前的樣式更改為新的樣式。指定至少這兩個(gè)CSS3的動(dòng)畫屬性綁定向一個(gè)選擇器：1.規(guī)定動(dòng)畫的名稱。2.規(guī)定動(dòng)畫的時(shí)長(zhǎng)。

3.過渡案例-炫酷下拉

3-1原理分析

1.首先就是一個(gè)導(dǎo)航下拉，就是鼠標(biāo)放上去出現(xiàn)一個(gè)下拉列表
2.然后發(fā)現(xiàn)，下拉里面，每一個(gè)選項(xiàng)是從不同的兩個(gè)方向出現(xiàn)的
3.出現(xiàn)的方式是奇數(shù)項(xiàng)從左邊進(jìn)，偶數(shù)項(xiàng)從右邊進(jìn)，進(jìn)入方式是滑動(dòng)淡入。

3-2實(shí)現(xiàn)過程

1.首先頁面的布局，這個(gè)應(yīng)該大家都知道，菜單無非就是一個(gè)ul-li列表，下拉列表就是li下面的一個(gè)ul-li。

reset.css（樣式重置表和個(gè)人常用樣式封裝）

*{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代碼如下

css代碼如下

    .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;
    }
    /*奇數(shù)項(xiàng)初始往右邊偏移100%*/
    .demo-nav li ul li:nth-of-type(1n) {
        transform: translate3d(100%, 0, 0);
    }
    /*偶數(shù)項(xiàng)初始往左邊偏移100%*/
    .demo-nav li ul li:nth-of-type(2n) {
        transform: translate3d(-100%, 0, 0);
    }

    .demo-nav li:hover ul {
        overflow: visible;
    }
    /*透明度和互動(dòng)同時(shí)進(jìn)行*/
    .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;}，鼠標(biāo)放上父級(jí)li的時(shí)候，顯示ul不能這樣寫.demo-nav li:hover ul{display:block;}，要這樣寫，.demo-nav li:hover ul{overflow: visible;}因?yàn)橐婚_始如果子菜單ul是隱藏的，鼠標(biāo)放到父級(jí)li的時(shí)候，子菜單ul就顯示出來，這樣是看到子菜單ul下面li的動(dòng)畫的。

注意2：子菜單ul要用.demo-nav li ul{height: 0;overflow:hidden;}隱藏，在顯示的時(shí)候再設(shè)置.demo-nav li:hover ul{overflow: visible;}。這一步不能省，否則會(huì)出問題。如果不加，實(shí)際上子菜單ul，以及子菜單ul下面的li一直在頁面上，如果鼠標(biāo)移上去子菜單ul，以及子菜單ul下面的li。那么實(shí)際上也會(huì)觸發(fā)父級(jí)li的hover。

3-3與JS實(shí)現(xiàn)對(duì)比

這個(gè)效果js也是能實(shí)現(xiàn)，實(shí)現(xiàn)上也不難，無非就是調(diào)用定時(shí)器的問題。但是寫的肯定比css3多，邏輯也會(huì)比css3復(fù)雜。
1.首先，父級(jí)li必須要綁定一個(gè)鼠標(biāo)移出和移入事件，也要定義一個(gè)屬性，記錄定時(shí)器（不同的父級(jí)li不能共用一個(gè)定時(shí)器，不然會(huì)受到干擾，必須每一個(gè)父級(jí)li下面都要有一個(gè)屬性記錄定時(shí)器）。obj.timer=setInterval(function(){},100)
2.用js實(shí)現(xiàn)，實(shí)際上也是操作class或者css。所以性能上css3是比js好！
3.針對(duì)這個(gè)動(dòng)畫，css3也比js好控制。

3-4完整代碼




    
    ec-css導(dǎo)航欄
    
    



    
        HTML5
            
                article
                section
                menu
                nav
            
        
        CSS3
            
                動(dòng)畫
                過渡
                圓形
                邊框
            
        
        Javascript
            
                字符串
                數(shù)組
                對(duì)象
                布爾
            
        
        Jquery
            
                動(dòng)畫
                特效
                AJAX
            
        
        VUE

4.過渡案例-手風(fēng)琴

4-1原理分析

這個(gè)看著就不難，也是一個(gè)ul-li，鼠標(biāo)移入li，li下面的標(biāo)題顏色，背景色，箭頭改變，li下面的div的高度改變！

4-2實(shí)現(xiàn)過程

1.首先，排版ul-li，li下面又有一個(gè)標(biāo)題（這個(gè)用h3）,和內(nèi)容（div）

html如下


    
        
            title 1
            content1
        
        
            title 2
            content2conte nt2content2content2content2conten t2content2content2content2content2conte nt2content2content2content2conte nt2content2content2content2 content2content2content 2content2content2content2content2conten t2content2c ontent2content2content2
        
        
            title 3
            content3
        
        
            title 4
            content4.

css代碼如下

由于這栗子，li里面的div在樣式上，設(shè)置了padding。所以建議我的做法是改變li設(shè)置overflow: hidden;height:40px;/*高度等于標(biāo)題的高度，初始就是隱藏div*/。因?yàn)槿绻髽?biāo)移入li，是操作div的話。
會(huì)有一個(gè)小問題！如下栗子！

部分代碼改成如下

.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;
}

大家看可以看到，鼠標(biāo)移出的那一瞬間，看到div里面的內(nèi)容也貼邊了！我就是為了避免這個(gè)，才通過操作li的高度來控制div的高度！

4-3與JS實(shí)現(xiàn)對(duì)比

1.這個(gè)動(dòng)畫，我感覺雖然性能上css3是比js要好一些。畢竟js也是控制css或者class來實(shí)現(xiàn)！
2.靈活性的話，這個(gè)就要比js差了，比如div的顯示與隱藏，我不想通過鼠標(biāo)移入移出的方式控制，如果我想通過點(diǎn)擊的方式控制div的顯示與隱藏呢。對(duì)于js的方式來說，這個(gè)就是觸發(fā)的事件就可以了，對(duì)于插件來說，可能就改一個(gè)插件就行了！對(duì)于css3實(shí)現(xiàn)的話，這個(gè)就不但要改css樣式了，也要改html結(jié)構(gòu)了！
這里，我的建議就是，這個(gè)動(dòng)畫最理想的還是用js和css3結(jié)果，結(jié)果是最好的。如果針對(duì)靈活性不高的需求，可以只用css3。

4-4完整代碼





ec-css手風(fēng)琴





    
        
            title 1
            content1
        
        
            title 2
            content2conte nt2content2content2content2conten t2content2content2content2content2conte nt2content2content2content2conte nt2content2content2content2 content2content2content 2content2content2content2content2conten t2content2c ontent2content2content2
        
        
            title 3
            content3
        
        
            title 4
            content4.

5.動(dòng)畫案例-無縫滾動(dòng)

如上圖，無縫滾動(dòng)也稱跑馬燈，就是一些內(nèi)容，然后向左移動(dòng)。鼠標(biāo)放上去的時(shí)候，動(dòng)畫停止！交互就這樣，下面來看實(shí)現(xiàn)過程！

5-1原理分析

1.首先，初始狀態(tài)就是如下圖，然后向右慢慢移動(dòng)（黑框部分為可視區(qū)域）

2.但是這樣，滾動(dòng)到最后一張的時(shí)候，就會(huì)出現(xiàn)問題！如下圖

3.所以正確的姿勢(shì)應(yīng)該是，這樣就需要對(duì)滾動(dòng)內(nèi)容進(jìn)行復(fù)制一次了！

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

5.這里就需要做一步了，就是在剛滾動(dòng)到下輪第一張的時(shí)候。如下圖（用這個(gè)案例說，不包括復(fù)制出來的4個(gè)li，就總共有4個(gè)，每個(gè)200px，那么就是方ul滾動(dòng)了800px的時(shí)候）

6.滾動(dòng)到這里，就瞬間拉回來，回到原來的位置，再進(jìn)行滾動(dòng)操作（當(dāng)ul滾動(dòng)了800px的時(shí)候，瞬間拉回原來位置，相當(dāng)于還沒有開始滾動(dòng)）

5-2實(shí)現(xiàn)過程

1.首先布局，就是在一個(gè)黑框就是一個(gè)div,橙色裝著1234的就是ul-li布局！
看下面的代碼注釋，再結(jié)合上面的原理，大家就很好理解了！

html代碼如下

css代碼

5-3與JS實(shí)現(xiàn)對(duì)比

1.這個(gè)動(dòng)畫，性能上當(dāng)然是css3比較好，而靈活性上也肯定是。比如做到下面這個(gè)圖這樣效果。點(diǎn)擊左右箭頭切換方向！

還有一個(gè)就是，比如上面案例中，li的個(gè)數(shù)是變化的，那么ul的寬度也是要用js計(jì)算，以及ul的內(nèi)容要進(jìn)行復(fù)制的話，以程序員的思維，理應(yīng)也是用js，而不是手動(dòng)復(fù)制！

2.所以，這個(gè)動(dòng)畫，建議的還是用js和css3結(jié)合使用，這樣結(jié)果最好，性能上和靈活上都得到折中，性價(jià)比無疑是最好的！

5-4完整代碼




    
    ec-css無縫滾動(dòng)

5.總結(jié)

關(guān)于css3，我的開發(fā)小原則就是能用css3解決的，我不會(huì)寫js，但是如果要寫js的，我也不會(huì)吝嗇到不寫js，只用css3寫出退而求之的效果！css3跟js搭配，能做出很多意想不到的震撼效果，這個(gè)就得看大家腦洞有多大了！
好了，今天通過三個(gè)案例帶大家初步認(rèn)識(shí)了css3的過渡和動(dòng)畫。希望能給大家起一個(gè)熱身的作用，或者是大家看了這三個(gè)案例，知道怎么去開發(fā)其它的案例，發(fā)散思維！但是這個(gè)只是css3過渡和動(dòng)畫的冰山一角而已，css3就算沒有其他的新特性，就說過渡和動(dòng)畫，魅力就足夠大，大家也可以到網(wǎng)上搜下css3的案例！就知道css3的魅力了！關(guān)于css3的新特性，以后我會(huì)繼續(xù)寫文章。
最后還是那句老話，如果覺得我哪里寫得不好，寫錯(cuò)了，歡迎指點(diǎn)！讓大家相互學(xué)習(xí)，相互幫助！

-------------------------華麗的分割線--------------------
想了解更多，關(guān)注關(guān)注我的微信公眾號(hào)：守候書閣

GPU云服務(wù)器云服務(wù)器翻轉(zhuǎn)過渡動(dòng)畫 ios過渡動(dòng)畫 jquery過渡動(dòng)畫無縫滾動(dòng)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/112334.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

zqhxuyuan

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

30歲轉(zhuǎn)入做軟件測(cè)試，能轉(zhuǎn)行成功嗎？別再被忽悠了，否則連工作都找不到

閱讀 782·2021-09-30 09:46
修羅云：兩周年特惠,有深港iplc/香港HKT/廣州/中山/徐州/杭州/佛山等,最低6折起

閱讀 3797·2021-09-03 10:45
CSS布局--圣杯布局和雙飛翼布局以及使用Flex實(shí)現(xiàn)圣杯布局

閱讀 3617·2019-08-30 14:11
css常用布局

閱讀 2551·2019-08-30 13:54
IE 8 瀏覽器 placeholder 兼容性處理

閱讀 2262·2019-08-30 11:00
CSS3熱身實(shí)戰(zhàn)--過渡與動(dòng)畫（實(shí)現(xiàn)炫酷下拉，手風(fēng)琴，無縫滾動(dòng)）

閱讀 2357·2019-08-29 13:03
聊聊clip-path

閱讀 1564·2019-08-29 11:16
Python爬蟲入門教程 2-100 妹子圖網(wǎng)站爬取

閱讀 3588·2019-08-26 13:52

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

CSS3熱身實(shí)戰(zhàn)--過渡與動(dòng)畫（實(shí)現(xiàn)炫酷下拉，手風(fēng)琴，無縫滾動(dòng)）

title 1

title 2

title 3

title 4

title 1

title 2

title 3

title 4

相關(guān)文章

SegmentFault 技術(shù)周刊 Vol.38 - 神奇的 CSS

2017-08-01 前端日?qǐng)?bào)

HTML-CSS-JS

HTML-CSS-JS

HTML-CSS-JS

發(fā)表評(píng)論

0條評(píng)論

zqhxuyuan

男|高級(jí)講師

TA的文章

30歲轉(zhuǎn)入做軟件測(cè)試，能轉(zhuǎn)行成功嗎？別再被忽悠了，否則連工作都找不到

修羅云：兩周年特惠,有深港iplc/香港HKT/廣州/中山/徐州/杭州/佛山等,最低6折起

CSS布局--圣杯布局和雙飛翼布局以及使用Flex實(shí)現(xiàn)圣杯布局

css常用布局

IE 8 瀏覽器 placeholder 兼容性處理