W3.CSS Animations (動畫)

2020-12-01 10:54 更新

W3.CSS為動畫提供以下類：

類 定義
w3-animate-top
從頂部滑動元素（-300px 至0）
w3-animate-bottom
從底部（-300px 到0）滑動元素
w3-animate-left
從左側(cè)滑動一個(gè)元素（從 -300px 到0）
w3-animate-right
從右邊滑動一個(gè)元素（從 -300px 到0）
w3-animate-opacity
在 1.5 秒內(nèi)使元素的不透明度從 0 變?yōu)?1
w3-animate-zoom
動畫大小從 0 到 100％ 的元素
w3-animate-fading
從 0 到 1 和 1 到 0 動畫化元素的不透明度（淡入+淡出）
w3-spin 將元素旋轉(zhuǎn) 360 度

動畫頂部

w3-animate-top 類能夠輕松對齊頂部（從 -300px 到 0）的元素：

實(shí)例

<div class="w3-container">

  <h1 class="w3-center w3-animate-top">動畫很有趣！</h1>

</div>


嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

底部動畫

w3-animate-bottom 類能夠輕松對齊底部（從 -300px 到 0）的元素：

實(shí)例

<div class="w3-container">

  <h1 class="w3-center w3-animate-bottom">動畫很有趣！</h1>

</div>


嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

左部動畫

w3-animate-left 類在元素中從左（-300px 到 0）滑動：

實(shí)例

<div class="w3-container">

  <h1 class="w3-center w3-animate-left">動畫很有趣！</h1>

</div>


嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

右部動畫

w3-animate-right 類在元素中從右（-300px 到 0）滑動：

實(shí)例

<div class="w3-container">

  <h1 class="w3-center w3-animate-right">動畫很有趣！</h1>

</div>


嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

淡入元素

w3-animate-opacity 類設(shè)置動畫的元素的不透明度，從 0 到 1 用時(shí) 0.8 秒。

淡入w3-animate-opacity類的元素：

實(shí)例

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


嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

縮放元素

w3-animate-zoom 類設(shè)置動畫從 0 到 100％ 的大小的元素。

使用 w3-animate-zoom 類放大元素：

實(shí)例

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


嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

自旋元素

w3-spin 類旋轉(zhuǎn)元素 360 度：

實(shí)例

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


嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

褪色效果

w3-animate-fading 類設(shè)置元素的退出效果，每 10 秒變淡（連續(xù)地）：

實(shí)例

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


嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

全部淡入

實(shí)例

<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">


嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例


以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號