HTML5技術(shù)為我們帶來了眾多實用的功能，其中淡入淡出效果也是非常實用的一個。下面我們來了解一下HTML5淡入淡出效果的代碼實現(xiàn)。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5淡入淡出效果代碼實現(xiàn)</title>
<script>
function fadeIn(element) {
var op = 0.1; // initial opacity
element.style.display = 'block';
var timer = setInterval(function () {
if (op >= 1){
clearInterval(timer);
}
element.style.opacity = op;
element.style.filter = 'alpha(opacity=' + op * 100 + ")";
op += op * 0.1;
}, 50);
}
function fadeOut(element) {
var op = 1; // initial opacity
var timer = setInterval(function () {
if (op<= 0.1){
clearInterval(timer);
element.style.display = 'none';
}
element.style.opacity = op;
element.style.filter = 'alpha(opacity=' + op * 100 + ")";
op -= op * 0.1;
}, 50);
}
</script>
</head>
<body>
<button onclick="fadeIn(document.getElementById('myDIV'))">淡入效果</button>
<button onclick="fadeOut(document.getElementById('myDIV'))">淡出效果</button>
<div id="myDIV" style="display:none;background-color:#666;width:200px;height:200px;"></div>
</body>
</html>以上是HTML5淡入淡出效果的代碼實現(xiàn)。代碼中使用了JavaScript語言實現(xiàn)淡入淡出效果的函數(shù)。代碼細節(jié)解釋如下：
1. 先定義了兩個JavaScript函數(shù)：fadeIn()和fadeOut()。
2. 在函數(shù)中，使用setInterval()函數(shù)，實現(xiàn)了不斷改變元素的opacity屬性（透明度）和filter屬性（IE瀏覽器的透明度）。同時使用了一個計時器，來控制淡入淡出的過程。
3. 在HTML中使用button元素，并綁定了相應(yīng)的點擊事件，點擊按鈕后，就可以實現(xiàn)元素的淡入淡出效果。
4. div元素是用來實現(xiàn)淡入淡出效果展示的，學(xué)習(xí)者可以修改其它元素來實現(xiàn)淡入淡出效果的展示。
總之，HTML5淡入淡出效果是非常實用且常用的效果之一，學(xué)會如何完成代碼實現(xiàn)，對于開發(fā)動態(tài)頁面將是非常有用的技術(shù)手段。