css 下拉动画 |css如何设置按钮变灰

代码实现如下：
/* 下拉菜单的CSS */
.dropdown {
position: relative;
display: inline-block;
}
/* 下拉内容的CSS */
.dropdown-content {
display: none;
position: absolute;
z-index: 1;
}
/* 当鼠标悬停在下拉菜单时，下拉内容显示 */
.dropdown:hover .dropdown-content {
display: block;
}
/* 下拉内容出现时的动画效果 */
.dropdown-content {
-webkit-animation: fadein 0.5s ease-in-out;
-moz-animation: fadein 0.5s ease-in-out;
-ms-animation: fadein 0.5s ease-in-out;
-o-animation: fadein 0.5s ease-in-out;
animation: fadein 0.5s ease-in-out;
}
/* 下拉内容消失时的动画效果 */
.dropdown:hover .dropdown-content {
-webkit-animation: fadeout 0.5s ease-in-out;
-moz-animation: fadeout 0.5s ease-in-out;
-ms-animation: fadeout 0.5s ease-in-out;
-o-animation: fadeout 0.5s ease-in-out;
animation: fadeout 0.5s ease-in-out;
}
/* 定义动画的CSS */
@-webkit-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-moz-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-ms-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-o-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-webkit-keyframes fadeout {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@-moz-keyframes fadeout {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@-ms-keyframes fadeout {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@-o-keyframes fadeout {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes fadeout {
from {
opacity: 1;
}
to {
opacity: 0;
}
}

上述代码中，大家使用了hover伪类控制下拉菜单内容的显示和隐藏。动画效果则是通过CSS3中的@keyframes实现的，用户可以通过更改动画的时间、缓动函数、关键帧等参数来实现各种不同的动画效果。