Question

我试图看看如何从幻灯片中的初始位置向上浮动文本。与OnGuardian在其网站上的行为一样。我已经尝试过CSS动画和w3动画，但问题是它没有从设置位置向上移动它只是从底部移动到原始位置。我愿意使用CSS，Javascript和＆amp; 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类设置动画。我的问题与无法知道如何找到预期效果有关。

Answer 1

你可以用纯CSS做到这一点，只要它是一个简单的动画。我已经为

创建了一个演示

@keyframes floatup {
  from {transform: translateY(0px);}
  to {transform: translateY(-100px);}
}

这将启动它已经设置/定位的对象，然后移动它。要使用关键帧，请在代码中添加以下语句：

animation: floatup 2s forwards;

调用'floatup'或你的关键帧名称来为对象设置动画;用2s设置持续时间。

最重要的是：在制作动画后，使用forwards告诉对象留在新位置（在上面的关键帧中高出20px）。

我已经使用您的HTML在Codepen上演示了这一点。 https://codepen.io/laureng/pen/LyzBbz

（注意：我添加了一些“重置”样式，因此您可以在没有默认正文填充/ ul填充/等的情况下看到它，并添加了随机的Google图像，因为我们无权访问您网站的/ images /文件夹）。

Answer 2

首先，确保您的文字在样式声明中有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 */
    }

html从初始位置移动文本动画

2 个答案: