整合營銷服務(wù)商

          電腦端+手機端+微信端=數(shù)據(jù)同步管理

          免費咨詢熱線:

          使用CSS3做一個帶動畫的下拉列表,來學(xué)習(xí)一下吧

          使用CSS3做一個帶動畫的下拉列表,來學(xué)習(xí)一下吧


          下拉列表select在表單中應(yīng)該算是使用頻率比較高的一個元素,而我們也知道頁面上默認的select標(biāo)簽樣式是很難看的。基本所有的團隊都會選擇使用Bootstrap或者自己封裝一個下拉列表的組件,今天我們也試著使用CSS3新特性來寫一個帶動畫效果的下拉列表樣式吧。

          CSS3

          感興趣的可以自行去github上學(xué)習(xí)源碼,github地址如下。

          https://github.com/zhouxiongking/article-pages/blob/master/articles/dropdown/dropdown.html

          頁面效果

          首先,我們來看看帶動畫效果的下拉列表效果是什么樣的,如下圖所示。

          效果圖

          頁面組成

          這里我們簡單分析下頁面的構(gòu)成,實際上非常的簡單,主要包含以下三個元素。

          1. 表示外層容器的div元素

          2. 上面是一個span元素

          3. 下面是一個ul元素,每個li表示一個列表項

          在整個下拉列表中,主要有兩個動畫。

          1. 下拉菜單旁邊的小三角圖標(biāo),在鼠標(biāo)懸浮和離開時動態(tài)變換

          2. 下方的列表,在鼠標(biāo)懸浮和離開上面的span元素時,列表會有動畫顯示和消失的效果。

          代碼構(gòu)成

          下面我們來看看整個頁面的代碼構(gòu)成。

          • HTML

          首先是頁面的HTML代碼,正如上一部分所講,頁面主要為一個外層容器div,內(nèi)部是一個span和ul元素,每個列表項li內(nèi)包含一個a元素,所有HTML部分代碼如下所示。

          HTML代碼

          • CSS

          CSS部分的代碼才是整個實現(xiàn)效果的核心,我們具體來分析。

          首先是頁面的全局基本配置樣式。

          全局配置

          然后是外層容器的樣式。

          外層容器樣式

          然后是span元素的樣式,旁邊的上三角形通過偽元素::after來實現(xiàn),在::after偽元素中通過border-color屬性來控制三角形的朝向,然后通過transition屬性設(shè)置變換樣式。

          span元素以及上三角形

          當(dāng)鼠標(biāo)停留在span元素上時,span元素背景色會改變,上三角會變成下三角。

          鼠標(biāo)停留后span的樣式

          緊接著是下面的ul以及l(fā)i元素的樣式,都是一些很普通的屬性。

          ul與li樣式

          然后是li下的a元素的樣式。

          li下a元素樣式

          然后是css中最核心的地方,ul的動畫效果,通過translate3d屬性改變ul所處的位置,再以transform屬性添加動畫效果。

          ul初始狀態(tài)

          至此,所有代碼講解完畢,如果運行成功后,會得到文章開始時的下拉列表效果。

          結(jié)束語

          本篇文章主要給大家介紹了如何使用CSS編寫一個帶動畫的下拉列表效果,你學(xué)會了嗎?

          文代碼的動畫


          <!DOCTYPE html>

          <html>

          <head>

          <meta charset="utf-8">

          <title>44-jQuery 下拉菜單</title>

          <style type="text/css">

          *{ /* 通配選擇器*/

          margin: 0; /*外邊距:0*/

          padding: 0; /*內(nèi)邊距:0*/

          }

          .daohang{ /* 導(dǎo)航樣式*/

          width: 80%; /*寬:80%*/

          height: 40px; /* 高:40像素*/

          border: #000000 solid 1px; /*邊框:黑色 實線 1像素*/

          background-color: chartreuse; /*背景顏色*/

          border-radius: 10px; /*圓角:10像素*/

          margin: 10px auto; /*外邊距:上10像素 左右居中*/

          }

          .daohang>li{ /* 導(dǎo)航里面的li標(biāo)簽樣式*/

          float: left; /*浮動:左浮動*/

          list-style: none; /*去除前面的點*/

          /* border: #000000 solid 1px; */

          background-color: #FFA500; /*背景顏色*/

          width: 15%; /*寬:15%*/

          height: 100%; /*高:100%*/

          border-radius: 10px; /*圓角:10像素*/

          margin-left: 4%; /*外左邊距:4%*/

          text-align: center; /*文字居中*/

          line-height: 35px; /*行高:35像素*/

          }

          .sub>li{ /* 二級菜單里的里標(biāo)簽樣式*/

          list-style: none; /*去除前面的點*/

          font-size: small; /*字體大?。盒?/

          background-color: #8B008B; /*背景顏色*/

          border: #000000 solid 1px; /*邊框:黑色 實線 1像素*/

          border-bottom: none; /*下邊框:空*/

          margin-top: 5px; /* 上邊距:5像素*/


          }

          .sub>li:hover{ /* 二級菜單里面的li標(biāo)簽的鼠標(biāo)停留*/

          background-color: red; /*背景顏色:紅色*/

          }

          .sub{ /* 二級菜單樣式*/

          display: none; /*隱藏*/

          }

          </style>

          <script src="../static/js/jquery-3.6.0.js"></script>

          <script type="text/javascript">

          $(function(){

          // 定義變量 裝 二級菜單的代碼

          var $sub=$('<ul class="sub"><li>二級菜單</li><li>二級菜單</li><li>二級菜單</li><li>二級菜單</li><li>二級菜單</li><li>二級菜單</li></ul>')

          // 導(dǎo)航ul里面的li標(biāo)簽的移入移出事件

          $(".daohang>li").hover(function(){

          $(this).append($sub) // 為現(xiàn)在這個li標(biāo)簽添加二級菜單

          $(".sub").stop() // 停止二級菜單的動畫

          $(".sub").slideDown(1000) // 用一秒的時間展開二級菜單

          }, function(){ // 移出事件

          $(".sub").stop() // 停止二級菜單的動畫

          $(".sub").slideUp(100) // 用100毫秒的時間收起二級菜單

          })

          })

          </script>

          </head>

          <body>

          <ul class="daohang"> <!-- 導(dǎo)航ul -->

          <li>第一個 <!-- li標(biāo)簽 -->

          <!-- <ul class="sub1">

          <li>二級菜單</li>

          <li>二級菜單</li>

          <li>二級菜單</li>

          <li>二級菜單</li>

          <li>二級菜單</li>

          <li>二級菜單</li>

          </ul> -->

          </li>

          <li>第二個</li> <!-- li標(biāo)簽 -->

          <li>第三個</li> <!-- li標(biāo)簽 -->

          <li>第四個</li> <!-- li標(biāo)簽 -->

          <li>第五個</li> <!-- li標(biāo)簽 -->

          </ul>

          </body>

          </html>

          ss實現(xiàn)常用下劃線導(dǎo)航動畫下拉菜單效果,看效果

          鼠標(biāo)經(jīng)過后,下劃線由中間像兩邊擴散,下拉框由下往上出現(xiàn)!

          代碼:

          css:


          主站蜘蛛池模板: 日韩一区二区视频| 精品一区二区三区在线视频| 亚洲一区二区三区在线观看网站| 久久综合亚洲色一区二区三区| 人妻aⅴ无码一区二区三区| 亚洲av鲁丝一区二区三区| 日韩人妻精品一区二区三区视频| 无码精品人妻一区二区三区中 | 人妻体内射精一区二区三四 | 理论亚洲区美一区二区三区| 国产在线第一区二区三区| 久久久久女教师免费一区| 久久精品一区二区三区不卡| 中文字幕AV一区二区三区人妻少妇 | 无码人妻av一区二区三区蜜臀| 后入内射国产一区二区| 奇米精品一区二区三区在线观看| 亚洲欧美日韩一区二区三区| 精品久久国产一区二区三区香蕉| 色久综合网精品一区二区| 国产一区二区三区不卡在线看 | 国产一区二区内射最近更新| 亚洲第一区二区快射影院| 一区二区三区在线观看中文字幕| 无码一区二区三区视频| 精品一区二区三区AV天堂| 亚洲一区影音先锋色资源| 加勒比精品久久一区二区三区| 日韩人妻一区二区三区蜜桃视频 | 国产在线aaa片一区二区99| 亚洲日本va一区二区三区| 日韩精品人妻一区二区中文八零| 国产精品日韩欧美一区二区三区| 久久久久人妻一区二区三区vr| 国产精品一区在线麻豆| 日韩视频免费一区二区三区| 国产激情无码一区二区三区| 久久国产精品一区免费下载| 天堂va在线高清一区| 三级韩国一区久久二区综合| 中日av乱码一区二区三区乱码|