下拉框的实现

 

.top {
    opacity: 0;
    position: relative;
    right: 90px;
    bottom: 34px;
    color: rgb(221, 221, 221);
    background: rgb(67, 67, 67);
    cursor: pointer;
    width: 90px;
    height: 34px;
    text-align: center;
    line-height: 32px;
    font-size: 12px;
}

首先创建好一个盒子并设置opacity属性值为0；此时盒子完全透明；即隐藏。

#top:hover .top {
    opacity: 1;
    background: rgb(67, 67, 67);
    animation: move 0.5s; /*动画名字叫move 完成时间1s*/
}
/*动画效果让div在放上去的同时移动到指定位置*/
@keyframes move {
    from {
        right: 120px;
    }
    to {
        right: 90px;
    }
}

加入hover属性，当鼠标放到#top盒子上时，opacity为1；此时设置的下拉框为完全不透明，此时.top出现，从而实现下拉框的效果