我目前正在设计一个CSS“巨型下拉菜单”——基本上是一个常规的仅限CSS的下拉菜单,但包含不同类型的内容。
目前,CSS 3转换似乎不适用于“display”属性,也就是说,您不能进行从display:none到display:block(或任何组合)的任何转换。
当有人悬停在一个顶级菜单项上时,上面示例中的第二层菜单是否有办法“淡入”?
我知道你可以在visibility:属性上使用转换,但我想不出一种有效的方法。
我也尝试过使用高度,但那只是失败得很惨。
我也意识到,使用JavaScript实现这一点很简单,但我想挑战一下自己,只使用CSS,我觉得我做得有点短。
我感谢所有的回答。以下是我用于类似目的的内容:过渡与动画。
例子:https://jsfiddle.net/grinevri/tcod87Le/22/
<div class="animation"></div>
<div class="transition"></div>
@keyframes animationTo {
0% { background-color: rgba(0, 0, 0, 0.1); }
100% { background-color: rgba(0, 0, 0, 0.5); }
}
@keyframes animationFrom {
0% { background-color: rgba(0, 0, 0, 0.5); }
100% { background-color: rgba(0, 0, 0, 0.1); }
}
.animation,
.transition{
margin: 5px;
height: 100px;
width: 100px;
background-color: rgba(0, 0, 0, 0.1);
}
.animation{
animation: animationFrom 250ms;
}
.animation:hover{
background-color: rgba(0, 0, 0, 0.5);
animation: animationTo 250ms;
}
.transition{
transition: background-color 250ms;
}
.transition:hover{
background-color: rgba(0, 0, 0, 0.5);
}