我知道如何进行淡入淡出的 CSS 过渡,但是否有解决方案可以从上到下淡出?
这是我的代码
.navbar-default{
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
我需要从上到下的动画,有什么建议吗?
最佳答案
这对于纯 CSS 是不可能的。只有当我们可以使用纯 CSS 重新创建背景(可能还有前景)时,我们才能解决这种情况,这意味着纯色或可能渐变。这是因为使用 opacity
会影响整个元素,并且不能按照您希望的方向移动
因此,我选择使用伪元素和一些渐变。因为在我的例子中,基本元素是黑色的,背景是白色的,所以我创建了一个渐变,下半部分从黑色渐变到白色,然后上半部分保持白色。然后,您可以使伪元素的高度是原始元素的两倍,将其放置在 top:-200%
处,并使用 transform:translateY(100%)
到 < em>基本上 从顶部淡出元素。实际上,这只是以一种欺骗我们眼睛的方式掩盖它。所有这一切都是通过元素上的 overflow:hidden
Demo (目前只有 webkit 和无前缀)
.elem {
width:50px;
height:50px;
background:black;
margin:20px;
overflow:hidden;
position:relative;
}
.elem:before {
content:'';
position:absolute;
height:200%;
width:100%;
top:-200%;
background:white;
background: linear-gradient(to bottom, #ffffff 0%, #ffffff 50%, #000000 100%);
transition:all 0.5s ease;
left:0;
}
.elem:hover:before {
transform:translateY(100%);
}
This tool可以帮助您生成所需的渐变
可能有一种方法可以在没有使用 javascript 的伪元素的情况下做到这一点
关于方向的 CSS 过渡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22665641/