2016-08-09 14:24:24可可 夜

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


效果預覽:http://sugri.pe.hu/shake.html

教學:



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