W3.CSS Animations (动画)

2020-12-01 10:54 更新

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类的元素:

实例

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


尝试一下 »
点击“尝试一下”按钮查看在线实例

缩放元素

w3-animate-zoom 类设置动画从 0 到 100% 的大小的元素。

使用 w3-animate-zoom 类放大元素:

实例

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


尝试一下 »
点击“尝试一下”按钮查看在线实例

自旋元素

w3-spin 类旋转元素 360 度:

实例

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


尝试一下 »
点击“尝试一下”按钮查看在线实例

褪色效果

w3-animate-fading 类设置元素的退出效果,每 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">


尝试一下 »
点击“尝试一下”按钮查看在线实例


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号