前言
下拉列表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编写一个带动画的下拉列表效果，你学会了吗？