利用CSS实现酷炫的下拉框特效

2、为 p 元素单独指定样式，并设置其 position 属性，主要是为了下面绘制右侧的下拉按钮。

3、利用 :after 在p 元素的右方绘制下拉按钮，可以看出来，我们是利用左下边框然后旋转 -45 度 模拟的这个效果。值得注意的是，我们需要将其  display 设置为 block，并且设置宽高，否则看不到 这个效果。

CSS Code复制内容到剪贴板

.select ul {   
    margin-top: 0;   
    border-top-left-radius: 0;   
    border-top-rightright-radius: 0;   
    list-style-type: none;   
    cursor: pointer;   
    overflow-y: auto;   
    max-height: 0;   
    transition: max-height .3s ease-out;   
}   
  
.select ul li {   
    padding-left: 0.5rem;   
    display: block;   
    line-height: 3rem;   
    text-align: left;   
}  

1、设置 ul 的一些默认属性，并将其设置最大宽度为 0，指定 overflow-y 为 auto ，这个时候ul 将会被隐藏。

2、在这里设置的时候我遇到了一个问题，就是 li 标签始终占不满 ul 的一行，那是因为其默认有 margin 和 padding ，所以在一开始的时候就将网页中所有元素的外边距和内边距设置成了 0。

CSS Code复制内容到剪贴板

.select.open ul {   
    max-height: 20rem;   
    transform-origin: 50% 0;   
    -webkit-animation: slide-down .5s ease-in;   
}   
  
.select.open > p:after {   
    position: absolute;   
    top: 1.6rem;   
    transform: rotate(-225deg);   
    transition: transform .3s ease-in, top .2s ease-in;   
}  

1、为 open 设置最大高度，并为其指定动画效果。

2、将下拉按钮旋转 -225 度，并为其指定动画。

下面我们看看为 ul 元素指定的 slide-down 动画效果，这也是这个下拉特效的关键所在。

CSS Code复制内容到剪贴板

@-webkit-keyframes slide-down {   
    0% {   
        transform: scale(1, 0);