[網頁製作學習] Shake效果 (滑鼠移入時時會震動，引起讀者注意)＠動畫圖集站

2016-08-09 14:24:24| 人氣2,571| 回應0 | 上一篇 | 下一篇

[網頁製作學習] Shake效果 (滑鼠移入時時會震動，引起讀者注意)

推薦 0 收藏 0 轉貼0 訂閱站台

Step1. 右鍵另存下方連結，並上傳到自已的ftp網站目錄下

http://sugri.pe.hu/animate.min.css
或
http://sugri.pe.hu/animate.min2.css (震動更頻繁，使用此版本時，下一步的animate.min.css需改成animate.min2.css)

Step2. 在網頁Html的<head>與</head>中間貼入

<link rel="stylesheet" type="text/css" href="animate.min.css">

Step3. 使用class=shake，例：

<center><section class="content">
<h1>Shaking Image and Text</h1><br><br>
<h2 class="shake">Shake this text</h2>
<a href="http://api.hostinger.com.hk/redir/18445007" target="_blank" title="免費註冊虛擬主機"><img alt="Hostinger" border="0" src="http://i.imgur.com/kUBwY72.png" class="shake"></a>
</section></center>

註1：在步驟2完成後，網頁背景顏色與完成步驟3的圖片大小可能會因animate.min.css內容有所改變，但可透過註2和註3方法覆蓋設定。

註2：對圖片加入style="width:80px;height:100px;" 語法再次指定圖片大小，例：

<img alt="Hostinger" border="0" src="http://i.imgur.com/kUBwY72.png" style="width:80px;height:100px;" class="shake">

其中width為寬；height為高，px是解析度單位。

註3：網頁可利用div float分區排版，來讓shake或其他語法作用在特定區域，例：

<div style="width:80px;height:100px;float:center;background-color:#FFD382;">
<a href="http://api.hostinger.com.hk/redir/18445007" target="_blank" title="點我免費註冊虛擬主機"><img alt="Hostinger" border="0" src="http://rndmlnk.com/s/CzRFKceV" style="width:80px;height:100px;" class="shake"></a>
</div>

其中 background-color可指定該區背景顏色

參考資料：

網址1：codepen.io/GhostRider/pen/FctLB/
網址2：www.webtech.tw/info.php?tid=79

我要檢舉

#css shake 文字圖片震動

台長：可可夜