網頁圖片Image FadeIn淡入FadeOut淡出效果

html Image FadeIn跟FadeOut淡出淡入效果,可以使用jquery的function來完成,可以參考範例,或是直接使用CSS3也可以,底下是一個範例。




<!DOCTYPE html>
<html lang="zh-TW" class="no-js">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width">
	<style type="text/css">
	img.button {
    opacity: 0.6;
    transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -webkit-transition: opacity 1s ease-in-out;
	}
	img.button:hover {
		opacity: 1.0;
		transition: opacity .55s ease-in-out;
		-moz-transition: opacity .55s ease-in-out;
		-webkit-transition: opacity .55s ease-in-out;
	}
	</style>
<title>聰明的生活-教學文件與筆記</title>
</head>
<body>
<img class="button" src="/wp-content/uploads/2015/09/clickMe.png">
</body>
</html>

Demo效果

發表迴響

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料