W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

W3.CSS 动画



使用W3.CSS动画,您可以滑动和淡入HTML元素。








W3C中文教程欢迎你!
W3C中文教程欢迎你!
W3C中文教程欢迎你!
W3C中文教程欢迎你!
W3C中文教程欢迎你!
W3C中文教程欢迎你!
W3C中文教程欢迎你!

滑动元素

使用 w3-animate-* 类可以从屏幕的顶部,底部,左侧或右侧滑入元素:

定义
w3-animate-top 将一个元素从屏幕顶部的300px移动到0px处 尝 试
w3-animate-bottom 将一个元素从屏幕底部的300px移动到0px处 尝 试
w3-animate-left 将一个元素从屏幕左侧的300px移动到0px处 尝 试
w3-animate-right 将一个元素从屏幕右侧的300px移动到0px处 尝 试

淡入元素

w3-animate-opacity 类可用于淡入元素:

Example

<div class="w3-animate-opacity">..</div>
尝试一下 »


放大元素

w3-animate-zoom 类可用于放大元素:

Example

<div class="w3-animate-zoom">..</div>
尝试一下 »

旋转元素

w3-spin 类可用于360度旋转元素:

Example

<div class="w3-spin">..</div>
尝试一下 »

循环淡入淡出实例

Example

<div class="w3-animate-fading">..</div>
尝试一下 »

实例

Example

<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">
尝试一下 »