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

Question

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

如果有人能想出为此编写什么代码，那就太好了。

Answer 1

您可以通过关键帧使用动画
http://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp

或通过 SVG，这是 HTML5
的标准部分 http://tutorials.jenkov.com/svg/svg-animation.html

消失文字的提示：小 div 没有溢出，div 里面有文字，动画必须改变它的顶部。

Answer 2

您可以为此使用 CSS Animations。

这是一个运行示例，仅包含 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>

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

How to make a text slideshow using CSS/HTML/JAVA

html

css

image

slideshow