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;" 語法再次指定圖片大小,例:
其中width為寬;height為高,px是解析度單位。<img alt="Hostinger" border="0" src="http://i.imgur.com/kUBwY72.png" style="width:80px;height:100px;" class="shake">
註3:網頁可利用div float分區排版,來讓shake或其他語法作用在特定區域,例:
其中 background-color可指定該區背景顏色<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>
參考資料:
網址1:codepen.io/GhostRider/pen/FctLB/網址2:www.webtech.tw/info.php?tid=79