目录

W3.CSS 动画

❮ 上一节下一节 ❯

动画很有趣！

动画很有趣！

动画很有趣！

动画很有趣！

动画很有趣！

动画很有趣！

动画很有趣！

动画很有趣！

W3.CSS 动画类

W3.CSS 为动画提供了以下类：

类	定义
w3-动画顶部	从顶部滑入元素（-300px 到 0）
w3-动画底部	从底部滑入元素（-300px 到 0）
w3-动画左	从左侧滑入元素（-300px 到 0）
w3-动画右	从右侧滑入元素（-300px 到 0）
w3-动画不透明度	在 0.8 秒内将元素的不透明度从 0 动画化到 1
w3-动画缩放	将元素的大小从 0% 动画到 100%
w3-动画淡入淡出	将元素的不透明度从 0 设置为 1 以及从 1 设置为 0（淡入 + 淡出）
w3旋转	将元素旋转 360 度

动画顶部

这个w3-动画顶部类从顶部滑入元素（从 -300px 到 0）：

示例

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

亲自试一试»

底部动画

这个w3-动画底部类从底部滑入元素（从 -300px 到 0）：

示例

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

亲自试一试»

向左动画

这个w3-动画左类从左侧滑入元素（-300px 到 0）：

示例

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

亲自试一试»

向右动画

这个w3-动画右类从右侧滑入元素（-300px 到 0）：

示例

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

亲自试一试»

淡入元素

这个w3-动画不透明度class 在 0.8 秒内将元素的不透明度从 0 动画到 1。

淡入元素w3-动画不透明度类：

示例

<div class="w3-animate-opacity">..</div>

亲自试一试»

放大元素

这个w3-动画缩放class 将元素的大小从 0% 动画到 100%。

使用放大元素w3-动画缩放类：

示例

<div class="w3-animate-zoom">..</div>

亲自试一试»

旋转元素

这个w3旋转类将元素旋转 360 度：

示例

<div class="w3-spin">..</div>

亲自试一试»

无限褪色

这个w3-动画淡入淡出类每 10 秒淡入和淡出一个元素（连续）：

动画淡入和淡出

示例

<div class="w3-animate-fading">..</div>

亲自试一试»

全部淡出

示例

<img class="w3-animate-top" src="img_01.jpg">
<img class="w3-animate-zoom" src="img_02.jpg">
<img class="w3-animate-left" src="img_03.jpg">
<img class="w3-animate-bottom" src="img_04.jpg">

亲自试一试»

❮ 上一节下一节 ❯