zoom教室下載
聯成電腦網頁設計教學：8個簡單的CSS Hover效果
文、前端小編
剛入門網頁的你時常苦惱網站一動也不動覺得很死板嗎？強大的CSS3提供了相當多的新功能，例如transition、transform、border-radius……等等，透過這些新功能，可以讓原本比較靜態的網頁，變成有許多動態繽紛的效果。現在就來看看適合前端入門的一些簡單又實用的CSS Hover效果吧！
在我們開始之前， 首先要先設置好HTML頁面，將一塊div標籤的class命名為demo。
<body>
<div class="demo"> </div>
</body>
然後設定demo區塊的寬高，和給他個背景background-color，最好令他margin: auto置個中會讓我們在demo中看起來比較舒服。再來就是這次最重要的transition轉場效果(速度設定0.5秒)。
.demo {
width : 200px;
height : 200px;
background-color : #ccc;
margin : 80px auto 0;
transition : 0.5s;
}
前置作業都完成的話，我們就正式進入主題吧！
一、淡入/淡出
讓物件淡入是相當常用效果，這是個強調與引起關注的好方法。主要分為兩個步驟：首先設置初始狀態，再來設置hover後的狀態。
.demo {
opacity : 0.3;
}
.demo:hover {
opacity : 1;
}
當我們使用滑鼠hover後，就可以看到淡入效果。
同理，淡出的效果只要將css裡opacity的值互換即可。
二、變換顏色
相當容易卻又非常普遍的效果，只要將background-color在hover後設置即可。
.demo:hover {
background-color : #fa0;
}
三、放大/縮小
如果要放大一個元素，我們可以重新設置他的寬高，不過這次我們要利用CSS3的transform: scale(n)來操作，意思是將元素變形為原本的n倍。
.demo:hover {
transform : scale(1.2);
}
縮小元素就跟放大一樣簡單，只要將scale裡的值設置小於1即可(變為原本的n倍)。
.demo:hover {
transform : scale(0.6);
}
四、旋轉
CSS transform有很多不同的用法，其中一個非常好玩的方法就是旋轉元素。以下是transform: rotate(Ndeg)的範例，意思是將元素旋轉N度。
.demo:hover {
transform : rotate (45deg);
}
五、圓角
網站裡非常流行的效果就是圓角，這是個非常簡單的效果，使用起來也是，我們只需要利用border-radius的屬性。
.demo:hover {
border-radius : 50%;
}
六、陰影
陰影效果可以讓元素看起來更有3D感，透過box-shadow屬性來控制元素的陰影，依序控制的值為 x位移 y位移 羽化模糊 顏色，下面的範例意思是陰影水平位移10像素、垂直位移10像素、模糊5像素、顏色黑色(透明度0.8)。
.demo:hover {
box-shadow : 10px 10px 5px rgba(0,0,0,0.8);
}
七、搖擺
也不是所有的元素都只能用transition來做動畫效果，我們還可以使用CSS3的animation屬性來製作更複雜的動畫。在使用animation之前，首先我們需要定義動畫，這時候我們需要使用@keyframes。
@keyframes swing {
15% { transform: translateX(5px); }
40% { transform: translateX(-5px); }
65% { transform: translateX(2px); }
85% { transform: translateX(-2px); }
100% { transform: translateX(0px); }
}
這個動畫只是簡單的讓元素左右搖擺，應用到的animation屬性也很簡單，未來小編也會再另外寫一篇文章來介紹CSS3的animation。這裡的範例控制的值為動畫名稱 動畫時間 動畫次數。
.demo:hover {
animation : swing 1s 1;
}
八、內邊框
邊框大家首先想到的是使用border，這應該是簡單又快速的方法之一，但是border的使用可能會改變元素的位置，當然也有方法可以來解決，這個我們另外再談。其實更簡單的方法是使用內陰影：
.demo:hover {
box-shadow : inset 0 0 0 30px #fa0;
}
這幾個簡單又好用的CSS轉場效果，當然你也可以將他們混和在一起用，例如：
.demo:hover {
transform : rotate(-45deg);
background-color : #fa0;
border-radius : 50%;
}
.demo {
opacity : 0.3;
}
.demo:hover {
opacity : 1;
transform : scale(1.2);
}
