整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
下拉列表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小时内与您取得联系。
