从黑色css制作淡入淡出

【问题标题】：Make fadeIn from black css从黑色css制作淡入淡出
【发布时间】：2021-03-09 19:06:26
【问题描述】：

我一直在使用关键帧和动画来使我的部分淡入，但每当我使用不透明度时，它总是从 white 淡入。如何使我的屏幕从黑色开始并淡入我的部分？

【问题讨论】：

标签： css fade

【解决方案1】：

为您的元素创建一个黑色叠加层（使用与position: absolute; top: 0; bottom: 0; left: 0; right: 0; 相同大小的元素，而原始元素是具有position: relative 的叠加层的父元素，或者它们的共同父元素具有position: relative）和淡入淡出/ trnasition反之亦然的不透明度值 - 从 1.0 到 0。

【讨论】：

【解决方案2】：

您可以使用 Johannes 指定的叠加层

.overlay-black{
    position: absolute;
    top: 0; left: 0;
    height: 100vh;
    width: 100vw;
    z-index:1;
    background-color:black;
    animation-name:fadeIn;
    animation-duration:0.5s;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
}

@keyframes fadeIn {
    from{
        opacity: 1;
    }
    to{
        opacity: 0;
    }
}

【讨论】：