如何使用 css 从 html 的一侧加载图像

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/

如何使用 css 从 html 的一侧加载图像

how to Load an image from side in html using css

html

css

w3.css