berylgobby 發表於 2019-4-24 10:28:10

網頁設計教學:8個簡單的CSS Hover效果

文、前端小編
https://www.lccnet.com.tw/lccnet/Upload/Article/news-1510.jpg




剛入門網頁的你時常苦惱網站一動也不動覺得很死板嗎?強大的CSS3提供了相當多的新功能,例如transition、transform、border-radius……等等,透過這些新功能,可以讓原本比較靜態的網頁,變成有許多動態繽紛的效果。現在就來看看適合前端入門的一些簡單又實用的CSS Hover效果吧!

在我們開始之前, 首先要先設置好HTML頁面,將一塊div標籤的class命名為demo。


HTML:
    <body>             <div class="demo"></div>    </body>



然後設定demo區塊的寬高,和給他個背景background-color,最好令他margin: auto置個中會讓我們在demo中看起來比較舒服。再來就是這次最重要的transition轉場效果(速度設定0.5秒)。      
CSS:
.demo {          width: 200px;          height:200px;          background-color: #ccc;          margin: 80px auto 0;          transition: 0.5s;}
https://www.lccnet.com.tw/lccnet/Upload/Ckeditor/1554736535.jpg
前置作業都完成的話,我們就正式進入主題吧!




一、淡入/淡出
讓物件淡入是相當常用效果,這是個強調與引起關注的好方法。主要分為兩個步驟:首先設置初始狀態,再來設置hover後的狀態。


CSS:
.demo {         opacity: 0.3;}
.demo:hover {          opacity: 1;}



當我們使用滑鼠hover後,就可以看到淡入效果。
https://www.lccnet.com.tw/lccnet/Upload/Ckeditor/1554736706.gif

同理,淡出的效果只要將css裡opacity的值互換即可。
https://www.lccnet.com.tw/lccnet/Upload/Ckeditor/1554736726.gif
二、變換顏色
相當容易卻又非常普遍的效果,只要將background-color在hover後設置即可。


CSS:
.demo:hover {         background-color: #fa0;}
https://www.lccnet.com.tw/lccnet/Upload/Ckeditor/1554737124.gif
三、放大/縮小

如果要放大一個元素,我們可以重新設置他的寬高,不過這次我們要利用CSS3的transform: scale(n)來操作,意思是將元素變形為原本的n倍。


CSS:
.demo:hover {          transform: scale(1.2);}
https://www.lccnet.com.tw/lccnet/Upload/Ckeditor/1554737320.gif
縮小元素就跟放大一樣簡單,只要將scale裡的值設置小於1即可(變為原本的n倍)。


CSS:
.demo:hover {         transform: scale(0.6);}
https://www.lccnet.com.tw/lccnet/Upload/Ckeditor/1554737346.gif
四、旋轉

CSS transform有很多不同的用法,其中一個非常好玩的方法就是旋轉元素。以下是transform: rotate(Ndeg)的範例,意思是將元素旋轉N度。

CSS:
.demo:hover {         transform: rotate (45deg);}
https://www.lccnet.com.tw/lccnet/Upload/Ckeditor/1554737433.gif
▍CSS的Hover效果你會了哪些呢?前端小編整理了8個常使用的效果,一起來看看吧!►我想觀看全文。




延伸閱讀
聯成電腦分享:早別人一步滿足對創意的無限渴望
聯成電腦網頁設計小知識:為何不能使用中文命名檔案?
聯成電腦網頁設計教學:一次搞懂CSS3選擇器
聯成電腦網頁設計教學:一次讓你搞懂SASS
聯成電腦網頁設計教學:一次就讓你搞懂Flexbox


官方網站:http://www.lccnet.com.tw
FB粉絲團:https://www.facebook.com/lccnetzone
菜鳥救星:https://www.facebook.com/greensn0w

頁: [1]
查看完整版本: 網頁設計教學:8個簡單的CSS Hover效果