欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

利用html+css實(shí)現(xiàn)菜單欄緩慢下拉效果的示例代碼

  發(fā)布時(shí)間：2021-03-22 11:59:06   作者：.眼里要有光.   我要評(píng)論
這篇文章主要介紹了利用html+css實(shí)現(xiàn)菜單欄緩慢下拉效果的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

目標(biāo)：利用html+css實(shí)現(xiàn)鼠標(biāo)移到菜單欄時(shí)，菜單欄會(huì)緩慢出現(xiàn)的效果

我們可以用兩種方法來解決這個(gè)問題

方法一：過渡（transition）

對(duì)forum-1開啟絕對(duì)定位(absolute)，讓里面的li從其父元素中脫離出去，不然會(huì)把之后的內(nèi)容往右擠，并且設(shè)置overflow：hidden, 設(shè)置高度為0， 鼠標(biāo)移入后再設(shè)置相應(yīng)的高度即可

.code .forum-1{
  /* 開啟絕對(duì)定位 */
  position: absolute;
  overflow: hidden;
  height: 0;
  transition-duration: 0.5s;
}

html 代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./css/index.css">
  <link rel="stylesheet" href="./css/reset.css">
  <title>菜單欄緩慢下拉</title>
</head>
<body>
  <ul class="code">
    <li><a href="#">博客</a></li>
    <li class="forum"><a href="#">論壇</a>
      <ul class="forum-1">
        <li><a href="#">css</a></li>
        <li class="vue"><a href="#">vue</a></li>
        <li><a href="#">python</a></li>
      </ul>
    </li>
    <li><a href="#">直播</a></li>
  </ul>
</body>
</html>

css 樣式代碼如下：

a{
  display: block;
  text-decoration: none;
  color: #333;
}
.code{
  width: 390px;
  height: 50px;
  line-height: 50px;
  background-color:#bfa;
  margin: 5px auto;
}
.code li{
  float: left;
  width: 130px;
  height: 50px;
  background-color: #bfa;
  text-align: center;
  margin: 0 auto;
  font-size: 20px;
}
.code > li:last-child{
  margin-right: 0;
}
.code > li:hover{
  background-color: #f8f192;
}
.forum{
  position: relative;
  margin: auto 90px;
}
.code .forum-1{
  /* 開啟絕對(duì)定位 */
  position: absolute;
  overflow: hidden;
  height: 0;
  transition-duration: 0.5s;
}
.forum:hover .forum-1{
  /* 鼠標(biāo)移入釋放高度 */
  height: 150px;
}

試了很多次發(fā)現(xiàn)，transition是不支持display屬性的，也就是說，不能用display：none隱藏菜單欄

方法二：動(dòng)畫（animation）

首先創(chuàng)建css動(dòng)畫：

@keyframes frames{
  from{
    height: 0px;
  }
  to{
    height: 150px;
  }
}

然后設(shè)置display：none隱藏菜單樣式，把它綁定到forum-1選擇器中，用animation綁定動(dòng)畫名字，設(shè)置持續(xù)時(shí)間

.forum-1{
  position: absolute;
  display: none;
  overflow: hidden;
  /* 綁定動(dòng)畫名字并且設(shè)置持續(xù)時(shí)間 */
  animation-name: frames;
  animation-duration: 0.5s;
}

當(dāng)鼠標(biāo)移入時(shí)，設(shè)置display屬性為block即可

.forum:hover .forum-1{
  display: block;
}

需要注意的一點(diǎn)是，這樣寫的結(jié)果會(huì)出現(xiàn)一個(gè)問題：當(dāng)鼠標(biāo)移入不久后二級(jí)菜單欄會(huì)自動(dòng)收回，為了避免這種問題，我們可以在forum-1選擇器內(nèi)部添加一行代碼即可：

.forum-1{
	animation-fill-mode: forwards;
}

其余代碼和方法一的代碼相同，這里不再贅述

效果圖如下：

在這里插入圖片描述

到此這篇關(guān)于利用html+css實(shí)現(xiàn)菜單欄緩慢下拉效果的示例代碼的文章就介紹到這了,更多相關(guān)html+css菜單欄緩慢下拉內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論