我用div块创建了动画。我有4个街区。这就是它们在计算机版本中的排列方式。.我需要在移动版本中将它们一个接一个地排列,并且它们每个都需要在4秒钟后出现,而其中一个似乎又需要消失。This is how I need to make them in mobile version和4秒钟之后该块需要更改为另一个。我该怎么做?
html:
<div class="div-wrap">
<div class="div-wrap-txt">
<div class="div-txt" id="one" style="padding-right: 35px;">
<p style="color: #6B7684;">Text<br>TextTextTextTextTextText <br>TextText.</p>
</div>
<div class="div-txt" id="two" style="padding-right: 35px; margin-top: 50px;">
<p style="color: #6B7684;">Text<br>TextTextTextTextTextText <br>TextText.</p>
</div>
</div>
<div class="div-img">
</div>
<div class="div-wrap-txt">
<div class="div-txt" id="three" style="text-align: left; padding-left: 25px;">
<p style="color: #6B7684;">Text<br>TextTextTextTextTextText <br>TextText.</p>
</div>
<div class="div-txt" id="four" style="text-align: left; padding-left: 25px; margin-top: 50px;">
<p style="color: #6B7684;">Text<br>TextTextTextTextTextText <br>TextText.</p>
</div>
</div>
</div>
css:
.div-wrap {
display: flex;
align-items: center;
flex-flow: column nowrap;
justify-content: space-between;
text-align: center;
}
:root {
--time: 24;
}
.div-txt img {
width: 36px;
height: 36px;
}
.div-txt {
height: 180px;
padding-top: 20px;
}
.div-txt p.label {
margin-top: 5px;
margin-bottom: 5px;
font-family: 'Cabin', sans-serif;
font-weight: 400;
font-size: 1.1rem;
color: #1F2533;
}
.div-wrap-txt {
margin-bottom: 70px;
width: 350px;
}
.div-wrap-txt:nth-child(1) .div-txt:nth-child(1) {
animation-delay: 0s;
}
.div-wrap-txt:nth-child(1) .div-txt:nth-child(2) {
animation-delay: calc(var(--time) / 4 * 1s);
}
.div-wrap-txt:nth-child(3) .div-txt:nth-child(1) {
animation-delay: calc(var(--time) / 2 * 1s);
}
.div-wrap-txt:nth-child(3) .div-txt:nth-child(2) {
animation-delay: calc(var(--time) / 1.33 * 1s);
}
.div-txt {
animation-duration: calc(var(--time) * 1s);
animation-iteration-count: infinite;
animation-name: color-change;
text-align: right;
}
@keyframes color-change {
0%,
25%,
100% {
background-color: #fff;
box-shadow: 0 0 0 rgba(0,0,0,0.1);
}
1%,
24% {
box-shadow: 0 10px 90px rgba(0, 0, 0, 0.4);
}
}
@media all and (min-width: 1170px) {
.div-wrap {
flex-flow: row nowrap;
justify-content: space-around;
}
}