HTML5 自從發布以來就成為了 Web 技術中的焦點，其中最大的亮點之一就是 HTML5 場景秀。HTML5 場景秀是一種基于 HTML5 技術的動態場景展示方式，具有極強的交互性和視覺表現力。
下面給大家介紹一段 HTML5 場景秀的源代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 場景秀示例</title>
<style>
/* CSS 樣式 */
#container {
width: 600px;
height: 400px;
background-color: #333;
position: relative;
overflow: hidden;
}
.box {
width: 100px;
height: 100px;
background-color: #fff;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
animation: moveBox 5s infinite;
transform-origin: center center;
}
@keyframes moveBox {
0% {
transform: rotate(0deg) translateX(0px) rotate(0deg);
}
50% {
transform: rotate(360deg) translateX(200px) rotate(-360deg);
}
100% {
transform: rotate(720deg) translateX(0px) rotate(720deg);
}
}
</style>
<script>
// JavaScript 代碼
window.onload = function() {
var boxs = document.getElementsByClassName('box');
for (var i = 0; i < boxs.length; i++) {
boxs[i].addEventListener('click', function() {
alert('你點擊了一個方塊！');
});
}
};
</script>
</head>
<body>
<div id="container">
<div class="box"></div>
</div>
</body>
</html>以上代碼是一個簡單的 HTML5 場景秀示例，其中包含了 HTML、CSS 和 JavaScript 代碼。其中，CSS 樣式用來定義場景秀的樣式和動畫效果，JavaScript 代碼用來實現交互效果，讓用戶通過點擊來觸發操作。
通過上面的代碼，我們可以看到 HTML5 場景秀擁有極強的交互性和視覺表現力。開發者可以通過靈活運用 HTML、CSS 和 JavaScript 基本技術來實現豐富多彩的場景效果。