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

資訊專欄INFORMATION COLUMN

CSS實(shí)現(xiàn)菜單按鈕動(dòng)畫

Bamboy / 3211人閱讀

摘要：要寫一個(gè)下拉菜單點(diǎn)擊按鈕菜單入口就是是點(diǎn)擊一個(gè)圖標(biāo)按鈕之前都是隨便用個(gè)圖片代替今天突然想用寫個(gè)效果主要參考澎湃移動(dòng)端右上角的按鈕效果中通過(guò)點(diǎn)擊事件改變按鈕容器按鈕容器三條橫線通過(guò)實(shí)現(xiàn)旋轉(zhuǎn)三條橫線

要寫一個(gè)下拉菜單點(diǎn)擊按鈕 菜單入口就是是點(diǎn)擊一個(gè)圖標(biāo)按鈕 之前都是隨便用個(gè)圖片代替 今天突然想用CSS寫個(gè)效果 主要參考澎湃移動(dòng)端右上角的按鈕

效果：

HTML

    //vue 中通過(guò)點(diǎn)擊事件改變class

CSS

    
    .burger {
        cursor: pointer;
        display: inline-block;
        margin: 7px 6px 0 0;
        outline: none;
    }
    
    
    
    .burger div {
        width: 30px;
        height: 4px;
        margin-bottom: 6px;
        background-color: rgb(51, 51, 51);
        transform: rotate3d(0, 0, 0, 0);
    }
    
    
    .burger.transform div {
        background-color: transparent;
    }

    .burger.transform div:first-of-type {
        top: 10px;
        transform: rotate3d(0, 0, 1, 45deg)
    }

    .burger.transform div:last-of-type {
        bottom: 10px;
        transform: rotate3d(0, 0, 1, -45deg)
    }

    
    .burger.transform div:first-of-type, .burger.transform div:last-of-type {
        transition: transform .4s .3s ease, background-color 250ms ease-in;
        background: #00c1de;
    }
    
    
    
    .burger div:first-of-type, .burger div:last-of-type {
        transition: transform .3s ease .0s, background-color 0ms ease-out;
        position: relative;
    }

只用transition也是能達(dá)到 animation的效果的 通過(guò)設(shè)置不同屬性的變化 掌握好變化時(shí)間 和延時(shí)的時(shí)間 就可以讓動(dòng)畫有先后順序

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

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

相關(guān)文章

  • CSS實(shí)現(xiàn)菜單按鈕動(dòng)畫

    摘要：要寫一個(gè)下拉菜單點(diǎn)擊按鈕菜單入口就是是點(diǎn)擊一個(gè)圖標(biāo)按鈕之前都是隨便用個(gè)圖片代替今天突然想用寫個(gè)效果主要參考澎湃移動(dòng)端右上角的按鈕效果中通過(guò)點(diǎn)擊事件改變按鈕容器按鈕容器三條橫線通過(guò)實(shí)現(xiàn)旋轉(zhuǎn)三條橫線 要寫一個(gè)下拉菜單點(diǎn)擊按鈕 菜單入口就是是點(diǎn)擊一個(gè)圖標(biāo)按鈕 之前都是隨便用個(gè)圖片代替 今天突然想用CSS寫個(gè)效果 主要參考澎湃移動(dòng)端右上角的按鈕 效果：showImg(https://segm...

    vibiu 評(píng)論0 收藏0

  • FE.CSS-Sultana后記：純css也能寫col,select,datepicker,caro

    摘要：接著只要在中使用就能搞定自適應(yīng)。代碼如下標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題在上述點(diǎn)功能中，可以用變量解決，比如實(shí)現(xiàn)了寬度，高度圓點(diǎn)大小直徑的控件。 未完待續(xù) 背景 如今css3越來(lái)越發(fā)達(dá)，focus-within等屬性也已經(jīng)開(kāi)始在Chrome得到支持。如果有出色的css功底，一點(diǎn)點(diǎn)ps技能，你也能用css3配合原生html標(biāo)簽寫出優(yōu)秀的框架。通過(guò)對(duì)css3的實(shí)踐，我發(fā)現(xiàn)自定義原生控件并不是什么難事，...

    BigTomato 評(píng)論0 收藏0

  • FE.CSS-Sultana后記：純css也能寫col,select,datepicker,caro

    摘要：接著只要在中使用就能搞定自適應(yīng)。代碼如下標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題在上述點(diǎn)功能中，可以用變量解決，比如實(shí)現(xiàn)了寬度，高度圓點(diǎn)大小直徑的控件。 未完待續(xù) 背景 如今css3越來(lái)越發(fā)達(dá)，focus-within等屬性也已經(jīng)開(kāi)始在Chrome得到支持。如果有出色的css功底，一點(diǎn)點(diǎn)ps技能，你也能用css3配合原生html標(biāo)簽寫出優(yōu)秀的框架。通過(guò)對(duì)css3的實(shí)踐，我發(fā)現(xiàn)自定義原生控件并不是什么難事，...

    lanffy 評(píng)論0 收藏0

  • FE.CSS-Sultana后記：純css也能寫col,select,datepicker,caro

    摘要：接著只要在中使用就能搞定自適應(yīng)。代碼如下標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題在上述點(diǎn)功能中，可以用變量解決，比如實(shí)現(xiàn)了寬度，高度圓點(diǎn)大小直徑的控件。 未完待續(xù) 背景 如今css3越來(lái)越發(fā)達(dá)，focus-within等屬性也已經(jīng)開(kāi)始在Chrome得到支持。如果有出色的css功底，一點(diǎn)點(diǎn)ps技能，你也能用css3配合原生html標(biāo)簽寫出優(yōu)秀的框架。通過(guò)對(duì)css3的實(shí)踐，我發(fā)現(xiàn)自定義原生控件并不是什么難事，...

    張金寶 評(píng)論0 收藏0

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

0條評(píng)論

閱讀需要支付1元查看
<