前言

下拉列表select在表单中应该算是使用频率比较高的一个元素，而我们也知道页面上默认的select标签样式是很难看的。基本所有的团队都会选择使用Bootstrap或者自己封装一个下拉列表的组件，今天我们也试着使用CSS3新特性来写一个带动画效果的下拉列表样式吧。

CSS3

感兴趣的可以自行去github上学习源码，github地址如下。

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

页面效果

首先，我们来看看带动画效果的下拉列表效果是什么样的，如下图所示。

效果图

页面组成

这里我们简单分析下页面的构成，实际上非常的简单，主要包含以下三个元素。

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

2. 上面是一个span元素

3. 下面是一个ul元素，每个li表示一个列表项
   

在整个下拉列表中，主要有两个动画。

1. 下拉菜单旁边的小三角图标，在鼠标悬浮和离开时动态变换

2. 下方的列表，在鼠标悬浮和离开上面的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编写一个带动画的下拉列表效果，你学会了吗？