整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
下拉列表select在表單中應該算是使用頻率比較高的一個元素，而我們也知道頁面上默認的select標簽樣式是很難看的。基本所有的團隊都會選擇使用Bootstrap或者自己封裝一個下拉列表的組件，今天我們也試著使用CSS3新特性來寫一個帶動畫效果的下拉列表樣式吧。
CSS3
感興趣的可以自行去github上學習源碼，github地址如下。
https://github.com/zhouxiongking/article-pages/blob/master/articles/dropdown/dropdown.html
首先，我們來看看帶動畫效果的下拉列表效果是什么樣的，如下圖所示。
效果圖
這里我們簡單分析下頁面的構成，實際上非常的簡單，主要包含以下三個元素。
表示外層容器的div元素
上面是一個span元素
下面是一個ul元素，每個li表示一個列表項
在整個下拉列表中，主要有兩個動畫。
下拉菜單旁邊的小三角圖標，在鼠標懸浮和離開時動態變換
下方的列表，在鼠標懸浮和離開上面的span元素時，列表會有動畫顯示和消失的效果。
下面我們來看看整個頁面的代碼構成。
HTML
首先是頁面的HTML代碼，正如上一部分所講，頁面主要為一個外層容器div，內部是一個span和ul元素，每個列表項li內包含一個a元素，所有HTML部分代碼如下所示。
HTML代碼
CSS
CSS部分的代碼才是整個實現效果的核心，我們具體來分析。
首先是頁面的全局基本配置樣式。
全局配置
然后是外層容器的樣式。
外層容器樣式
然后是span元素的樣式，旁邊的上三角形通過偽元素::after來實現，在::after偽元素中通過border-color屬性來控制三角形的朝向，然后通過transition屬性設置變換樣式。
span元素以及上三角形
當鼠標停留在span元素上時，span元素背景色會改變，上三角會變成下三角。
鼠標停留后span的樣式
緊接著是下面的ul以及li元素的樣式，都是一些很普通的屬性。
ul與li樣式
然后是li下的a元素的樣式。
li下a元素樣式
然后是css中最核心的地方，ul的動畫效果，通過translate3d屬性改變ul所處的位置，再以transform屬性添加動畫效果。
ul初始狀態
至此，所有代碼講解完畢，如果運行成功后，會得到文章開始時的下拉列表效果。
本篇文章主要給大家介紹了如何使用CSS編寫一個帶動畫的下拉列表效果，你學會了嗎？
下拉列表select在表單中應該算是使用頻率比較高的一個元素，而我們也知道頁面上默認的select標簽樣式是很難看的。基本所有的團隊都會選擇使用Bootstrap或者自己封裝一個下拉列表的組件，今天我們也試著使用CSS3新特性來寫一個帶動畫效果的下拉列表樣式吧。
CSS3
感興趣的可以自行去github上學習源碼，github地址如下。
https://github.com/zhouxiongking/article-pages/blob/master/articles/dropdown/dropdown.html
首先，我們來看看帶動畫效果的下拉列表效果是什么樣的，如下圖所示。
效果圖
這里我們簡單分析下頁面的構成，實際上非常的簡單，主要包含以下三個元素。
表示外層容器的div元素
上面是一個span元素
下面是一個ul元素，每個li表示一個列表項
在整個下拉列表中，主要有兩個動畫。
下拉菜單旁邊的小三角圖標，在鼠標懸浮和離開時動態變換
下方的列表，在鼠標懸浮和離開上面的span元素時，列表會有動畫顯示和消失的效果。
下面我們來看看整個頁面的代碼構成。
HTML
首先是頁面的HTML代碼，正如上一部分所講，頁面主要為一個外層容器div，內部是一個span和ul元素，每個列表項li內包含一個a元素，所有HTML部分代碼如下所示。
HTML代碼
CSS
CSS部分的代碼才是整個實現效果的核心，我們具體來分析。
首先是頁面的全局基本配置樣式。
全局配置
然后是外層容器的樣式。
外層容器樣式
然后是span元素的樣式，旁邊的上三角形通過偽元素::after來實現，在::after偽元素中通過border-color屬性來控制三角形的朝向，然后通過transition屬性設置變換樣式。
span元素以及上三角形
當鼠標停留在span元素上時，span元素背景色會改變，上三角會變成下三角。
鼠標停留后span的樣式
緊接著是下面的ul以及li元素的樣式，都是一些很普通的屬性。
ul與li樣式
然后是li下的a元素的樣式。
li下a元素樣式
然后是css中最核心的地方，ul的動畫效果，通過translate3d屬性改變ul所處的位置，再以transform屬性添加動畫效果。
ul初始狀態
至此，所有代碼講解完畢，如果運行成功后，會得到文章開始時的下拉列表效果。
本篇文章主要給大家介紹了如何使用CSS編寫一個帶動畫的下拉列表效果，你學會了嗎？
文教大家做一個分級下拉列表，該原型內包含了全國行政區劃二級（省份-城市）和三級（省份-城市-區縣），一起來看看~
今天，教大家如何做一個分級下拉列表。
該原型使用十分簡單，只需要在中繼器表格中填入一二三級內容即可。
該原型內包含了全國行政區劃二級（省份-城市）和三級（省份-城市-區縣）。
效果演示
制作方法：
下拉框1個，中繼器三個，中繼器內文本框1個，右箭頭一個，樣式根據個人喜歡設計即可。
一級中繼器內容
text為顯示的內容
next為是否有下一級內容，如果有，不需填寫；如果沒有，填寫1
二級中繼器內容
text為上級的內容，即該二級是屬于哪個一級的
text2為顯示的內容
next為是否有下一級內容，如果有，不需填寫；如果沒有，填寫1。eg：北京市只有兩級，next填寫1,則不會顯示向右箭頭
三級中繼器內容
text為第一級的內容，即該內容是屬于哪個一級的
text2的為第二級內容，即該內容是屬于哪個二級的
text3為顯示的內容
（1）外框交互
這個比較簡單，鼠標單擊時，切換中繼器一二三的隱藏/顯示樣式。
（2）中繼器交互
一級中繼器內容
每項加載時，設置文本框的文字為text列。如果next列不是空值，隱藏向右箭頭。
二級中繼器內容
每項加載時，設置文本框的文字為text2列。如果next列不是空值，隱藏向右箭頭。
三級中繼器內容
每項加載時，設置文本框的文字為text3列。
（3）中繼器內文本框交互
鼠標單擊時：添加篩選。
即點擊一級中繼器的文本框時，篩選出二級item.text=this.text的值。點擊二級點擊一級中繼器的文本框時，篩選出三級級item.text2=this.text的值。完成之后，以后使用只要更改中繼器表格的數據即可，非常方便，所以推薦給大家使用。
今天的教程到這里就結束了，有問題或者想下載原型的小伙伴們可以在下方評論處給我留言哦，我們下期見。
原型預覽地址：https://www.pmdaniu.com/storages/111207/47c954e892fccfe931d1b7637238b44a-69620/start.html?_d=Mon%20Dec%2016%202019%2013%3A50%3A42%20GMT%200800%20%28%E4%B8%AD%E5%9B%BD%E6%A0%87%E5%87%86%E6%97%B6%E9%97%B4%29?_d=Mon%20Dec%2016%202019%2014:38:13%20GMT+0800%20(%E4%B8%AD%E5%9B%BD%E6%A0%87%E5%87%86%E6%97%B6%E9%97%B4)#id=n5ndtc&p=%E6%A1%88%E4%BE%8B%EF%BC%9A%E4%BA%A7%E5%93%81-%E5%93%81%E7%89%8C-%E5%9E%8B%E5%8F%B7&g=1
本文由 @梓賢Vigo 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自 Unsplash，基于CC0協議
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
