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

yku jquery, opensource, 程式

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效果

發表迴響