Question

我知道如何制作淡入淡出的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;
}

我需要从上到下动画，有什么建议吗？

Answer 1

使用纯CSS这是不可能的。只有当我们可以用纯CSS重新创建背景（也许是前景）时，我们才能解决这种情况，这意味着纯色或可能渐变。这是因为使用opacity影响整个元素，并且无法按照您想要的方向前进

结果，我选择使用伪元素和一些渐变。因为，在我的情况下，基本元素是黑色而背景是白色的，我创建了一个渐变，从下半部分从黑色渐变到白色，然后在上半部分保持白色。然后，您可以将伪元素设置为原始元素的两倍，将其放置在top:-200%，并使用transform:translateY(100%)到基本上从顶部淡化元素。实际上，这只是以欺骗我们眼睛的方式掩盖它。所有这一切都可以通过元素

上的overflow:hidden实现

Demo（仅限webkit＆amp;未加固定）

.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从方向过渡

1 个答案: