如何使用CSS/HTML/JAVA製作文字幻燈片

Question

因此，我想爲我的網站製作使用CSS和HTML的文字幻燈片。 （我也可以使用Java）我想要一種特定類型....就像這個網站使用的那種（http://kickammender.com/）。

如果任何人都能弄清楚爲此編寫什麼代碼，那就太好了。小格沒有溢出，DIV裏面的文本：

Answer 1

您可以使用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>

Answer 2

您可以通過關鍵幀
http://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp

或通過SVG，這是HTML5
標準的一部分 http://tutorials.jenkov.com/svg/svg-animation.html

提示的消失文本中使用動畫，動畫必須改變其頂部。