我正在尝试了解如何让文本从幻灯片中的初始位置向上 float 。怎么样OnGuardian在他们的网站上做。我已经尝试过 CSS animated 和 w3 animate 但问题是它不会从设置位置向上移动它只是从底部移动到原始位置。我愿意使用 CSS、Javascript 和 HTML。
这是我的代码
<li style="background-image: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.2) 100%), url(Images/homepage1.jpg)">
<img class ="slider-image" src="Images/tenniscentrallogo1.png">
<!-- <div class="slider-logo "><span></span></div> -->
<div class="slider-content ">
<div class="slider-container ">
<div class="slider-center ">
<div class=" w3-animate-bottom slider-header">
<h2> Financial freedom & fun at your fingertips </h2>
</div>
<p class = " w3-animate-bottom slidertext"> Take an quantum leap into the future. Start a lucrative tennis business today with our dynamic team at your service</p>
<a class="btn play-video-btn" href="#" data-toggle="modal" data-target="#videoModal" preload="auto">Watch the video</a>
</div>
</div>
</div>
</li>
我想为 slider-header 类和 slider-text 类设置动画。我的问题更多的是不知道如何找到想要的效果。
最佳答案
首先,确保您的文本在样式声明中包含 position:absolute;
,然后尝试使用 bottom
属性的 CSS3 动画。
@-webkit-keyframes moveUp {
from { bottom : /* initial */ ; }
to { bottom : /* some extent of move up like initial - 30px */ ; }
}
#text {
-webkit-animation-name : moveUp ;
-webkit-animation-duration: 1s;
-webkit-animation-fill-mode: forwards ; /* to avoid the element going back to the initial position */
}
关于javascript - html 从初始位置向上移动文本动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43789617/