這篇“如何利用transform實(shí)現(xiàn)一個純CSS彈出菜單”除了程序員外大部分人都不太理解，今天小編為了讓大家更加理解“如何利用transform實(shí)現(xiàn)一個純CSS彈出菜單”，給大家總結(jié)了以下內(nèi)容，具有一定借鑒價(jià)值，內(nèi)容詳細(xì)步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望大家通過這篇文章有所收獲，下面讓我們一起來看看具體內(nèi)容吧。

創(chuàng)新互聯(lián)主營聊城網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,APP應(yīng)用開發(fā),聊城h5小程序定制開發(fā)搭建,聊城網(wǎng)站營銷推廣歡迎聊城等地區(qū)企業(yè)咨詢

先上效果

制作方法

核心就是利用了transform的區(qū)域位移方法，在配合上li標(biāo)簽的hover偽類和動畫延時，從而簡單實(shí)現(xiàn)了子菜單的顯示

 *{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
  body{
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }
  nav{
    margin: 10px;
  }
  nav ul {
    list-style-type: none;
    height: 32px;
    display: flex;
  }
  nav ul li{
    margin-right: 10px;
  }
  nav ul li strong{
    text-transform: uppercase;
    background-color: #9b59b6;
    color: white;
    padding: 5px 30px;
    line-height: 30px;
    cursor: pointer;
  }
  nav ul li strong+div{
    display: flex;
    flex-direction: column;
    background-color: #3498db;
    padding: 10px;
    transform: translateY(-110%);
    opacity: 0;
    transition: .3s;
    transform-origin: top;
  }
  nav ul li:hover div{
    transform: translateY(0);
    opacity: 1;
  }
  nav ul li strong+div a{
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    padding: 5px 0;
  }

感謝你的閱讀，希望你對“如何利用transform實(shí)現(xiàn)一個純CSS彈出菜單”這一關(guān)鍵問題有了一定的理解，具體使用情況還需要大家自己動手實(shí)驗(yàn)使用過才能領(lǐng)會，快去試試吧，如果想閱讀更多相關(guān)知識點(diǎn)的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！