Question

我尝试将主页上的淡出属性用于 #logo ，同时淡入 .container （整页）。因此，虽然徽标正在逐渐消失，但是它的主要页面已经被填满了。我尝试使用一些代码但我没有成功。有没有人知道一些适当的文件来达到它？谢谢

<div class="container">
    <div id="logo" class="animated fadeOut"></div>
</div>

.animated {
    z-index: 0;
    background-image: url(../../static/logo.svg);
    background-repeat: no-repeat;
    background-position: center;
    padding-top: 95px;
    margin-bottom: 60px; -webkit-animation-duration: 5s;
    animation-duration: 5s; -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@ - webkit-keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}.fadeOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut;
}

Answer 1

这应该有效。 HTML：

<div class="animated fadeIn container">
    <div id="logo" class="logo animated fadeOut"></div>
</div>

CSS：

@-webkit-keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
.logo {
    z-index: 0;
    background-image: url(../../static/logo.svg);
    background-repeat: no-repeat;
    background-position: center;
    padding-top: 95px;
    margin-bottom: 60px;
}
.animated{
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}


.fadeOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut;
}
.fadeIn {
    -webkit-animation-name: fadeOut;
    animation-name: fadeIn;
    -webkit-animation-direction: reverse; //reverse direction of animation
    animation-direction: reverse;
}

Css淡出徽标淡入背景页面

1 个答案: