如何在html中使用css加載圖像

Question

我一直在使用w3.css和html，並使用w3.css div等構建了一個網頁。頁面加載文本圖像，它使用淡入淡出等特徵。

但是我注意到一些網站有圖像從右側加載（如過渡） - 這可以用w3.css來完成。

Answer 1

w3.css已經有內置動畫元素的可能性。 https://www.w3schools.com/w3css/w3css_animate.asp

<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/> 
 

 
<style> 
 
.slower { 
 
    -webkit-animation-duration: 2.5s !important; 
 
    animation-duration: 2.5s!important; 
 
} 
 
</style> 
 

 
<div class="w3-container"> 
 
    <h1 class="w3-center w3-animate-right">Animation is Fun!</h1> 
 
</div> 
 

 
<!-- Slower Animation by adding additional class with overwrite --> 
 
<div class="w3-container"> 
 
    <h1 class="w3-center w3-animate-right slower">Animation is Fun!</h1> 
 
</div>

你也可以使用一個外部CSS動畫庫像animate.css https://daneden.github.io/animate.css/