W3.CSS Animations (动画)
W3.CSS为动画提供以下类:
类 | 定义 |
---|---|
w3-animate-top
|
从顶部滑动元素(-300px 至0) |
w3-animate-bottom
|
从底部(-300px 到0)滑动元素 |
w3-animate-left
|
从左侧滑动一个元素(从 -300px 到0) |
w3-animate-right
|
从右边滑动一个元素(从 -300px 到0) |
w3-animate-opacity
|
在 1.5 秒内使元素的不透明度从 0 变为 1 |
w3-animate-zoom
|
动画大小从 0 到 100% 的元素 |
w3-animate-fading
|
从 0 到 1 和 1 到 0 动画化元素的不透明度(淡入+淡出) |
w3-spin | 将元素旋转 360 度 |
动画顶部
w3-animate-top 类能够轻松对齐顶部(从 -300px 到 0)的元素:
实例
<div class="w3-container">
<h1 class="w3-center w3-animate-top">动画很有趣!</h1>
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
底部动画
w3-animate-bottom 类能够轻松对齐底部(从 -300px 到 0)的元素:
实例
<div class="w3-container">
<h1 class="w3-center w3-animate-bottom">动画很有趣!</h1>
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
左部动画
w3-animate-left 类在元素中从左(-300px 到 0)滑动:
实例
<div class="w3-container">
<h1 class="w3-center w3-animate-left">动画很有趣!</h1>
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
右部动画
w3-animate-right 类在元素中从右(-300px 到 0)滑动:
实例
<div class="w3-container">
<h1 class="w3-center w3-animate-right">动画很有趣!</h1>
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
淡入元素
w3-animate-opacity 类设置动画的元素的不透明度,从 0 到 1 用时 0.8 秒。
淡入w3-animate-opacity类的元素:
缩放元素
w3-animate-zoom 类设置动画从 0 到 100% 的大小的元素。
使用 w3-animate-zoom 类放大元素:
自旋元素
w3-spin 类旋转元素 360 度:
褪色效果
w3-animate-fading 类设置元素的退出效果,每 10 秒变淡(连续地):
全部淡入
实例
<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">
尝试一下 »
点击“尝试一下”按钮查看在线实例
更多建议: