是否有一种方法来褪色两个div元素到另一个在CSS?

Question

如果我有两个div元素，其中包含一些文本，我想让他们彼此，这样当一个消失，另一个出现，然后重复，我怎么去做呢?我不知道从哪里开始。

<div id="body">
<div>My great adventure</div>
<div>Travel, adventure, leisure</div>
</div>

Answer 1

使用CSS动画我们可以很简单地实现这一点。

我们将创建两个动画。一种是使文本最初淡入，另一种是使文本最初淡入。我们将这些动画设置为永远循环。

你可以根据需要调整时间和不透明度。

.fade {
position: absolute;
}
#start {
opacity: 1;
animation-name: fadeStart;
animation-duration: 4s;
animation-iteration-count: infinite;
}
#end {
opacity: 0;
animation-name: fadeEnd;
animation-duration: 4s;
animation-iteration-count: infinite;
}
@keyframes fadeStart {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeEnd {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}

<div id="container">
<div class="fade" id="start">My great adventure</div>
<div class="fade" id="end">Travel, adventure, leisure</div>
</div>

Answer 2

如果你只是在谈论非动画，静态元素在视觉上相互褪色，你可以为::before和::after的background使用linear-gradient伪元素。

下面是一个纯CSS的例子，使用CSS变量来一致的颜色和大小。::before和::after伪元素从背景色渐变为透明。您可以在#body > div上增加margin的乘数，以减少重叠的数量。

body {
--div-bg: orange;
--fade-height: 3rem;
background: white;
}
#body>div {
position: relative;
color: black;
background: var(--div-bg);
padding: 1rem;
margin: calc(var(--fade-height) * 1) 0 0;
}
#body>div::before,
#body>div::after {
content: "";
position: absolute;
left: 0;
right: 0;
height: var(--fade-height);
}
#body>div::after {
bottom: calc(var(--fade-height) * -1);
background: linear-gradient(to bottom, var(--div-bg), transparent);
}
#body>div::before {
top: calc(var(--fade-height) * -1);
background: linear-gradient(to top, var(--div-bg), transparent);
}

<div id="body">
<div>My great adventure</div>
<div style="--div-bg: #33F;">Travel, adventure, leisure</div>
</div>