如何使用CSS/HTML/JAVA制作文本幻灯片

Question

所以,我想为我的网站使用CSS和HTML制作文字幻灯片.(我也可以使用Java)我想要一个特定的类型....就像在它的标志下用于本网站(http://kickammender.com/)的那种.

如果有人能够找出要为此编写的代码,那就太棒了.

Answer 1

您可以使用CSS动画.

这是一个只有CSS和HTML的运行示例.

.slider {
  height: 18px;
  font-size: 16px;
  overflow: hidden;
  background-color: lightgrey;
}

.slider div, .slider div p {
  margin: 0;
  padding: 0;
}

.slider div {
  animation: slide 10s 2s infinite;
}

@keyframes slide {
  0% { margin-top: 0; }
  25% { margin-top: -18px; }
  50% { margin-top: -36px; }
  75% { margin-top: -54px; }
  100% { margin-top: 0; }
}

<div class="slider">
  <div>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </p>
    <p>
      Duis laoreet risus nunc, id iaculis velit finibus non.
    </p>
    <p>
      Pellentesque dictum nisi et tincidunt euismod.
    </p>
    <p>
      Proin in interdum enim, in ultricies massa.
    </p>
  </div>
</div>