我希望将缩小的图像过渡到第二张图像，第三张图像，依此类推。我尝试通过背景图像和缩放比例使用一些关键帧自己制作，除2个问题外，它工作得很好。1.我的文字和按钮也已缩放，2.图像的持续时间太短。我将包含它，但由于它不是我想要的，所以已将其删除。不知道是否有办法用纯CSS做到这一点，至少不容易。因此，我倾向于必须使用JS？这是我当前的代码。
.jumbo {
display: flex;
flex-direction: column;
justify-content: Center;
margin: 0;
width: 100vw;
height: 100vh;
min-height:100vh;
background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.3)),
url("images/j-img1.png");
background-repeat:no-repeat;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.jumbo-text {
text-align: center;
color: white;
font-weight: 600;
}
/* Jumbo button */
.vmore-button {
text-align: center;
border: 2px solid white;
text-transform: uppercase;
padding: 16px;
align-self: Center;
margin: 20px;
border-radius: 5px;
font-weight: 600;
font-size: 24px;
transition: 0.5s ease;
color: white;
max-height: 70px;
cursor:pointer;
} <div class="jumbo">
<h2 class="jumbo-text">
Welcome to LLG
</h2>
<h3 class="jumbo-text animated slideInLeft delay-1s" style="color:#e8e8e8; font-weight:500;">
Memorable Gaming Experience, High Quality Servers.
</h3>
<a class="vmore-button hvr-icon-pulse-shrink" href="#viewmore">View more<br><i class="fas fa-arrow-circle-down hvr-icon"></i></a>
</div>您将需要一个容器div和两个子分隔符。第一个孩子应该处理图像缩放/过渡，第二个孩子应该包含您的文本。图像分隔符和文本分隔符均应放置在绝对位置，以使它们彼此叠置。您可以通过将特定的类应用于父容器来更改活动/可见的跨度/图像。
<div class="container">
<div class="images">
<img>
<img>
<img>
</div>
<div class="text">
<span>TextA</span>
<span>TextB</span>
<span>TextC</span>
</div>
</div>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句