LCCNET 聯成電腦

菜鳥救星

m_nav_line m_nav_line

HOT影片

m_nav_line m_nav_line

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

icon_fb icon_twitter icon_google LINE it!
article_main_img

文、前端小編

 

 

 

剛入門網頁的你時常苦惱網站一動也不動覺得很死板嗎?強大的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);
	}
	

以上幾個簡單的範例提供給大家,當你還在煩惱該怎麼讓你的網頁稍微活起來的話,相信這些對於CSS初學者的你一定會有幫助的!(文章來源參考)

 

► 推薦課程:跨平台商業網站設計

 

 

 

 

痞客邦Blog:http://lccnetvip.pixnet.net/blog
FB粉絲團:https://www.facebook.com/lccnetzone
菜鳥救星:https://www.facebook.com/greensn0w

 

本網站使用相關網站技術以確保使用者獲得最佳體驗,通過使用我們的網站,您確認並同意本網站的隱私權政策。欲了解詳情,請參閱 隱私權政策