最近在網上看到了一種很有趣的現象，就是網頁中的HTML5代碼竟然可以飄起來了！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5代碼飄起來了！</title>
<style>
span{
animation: float 3s infinite;
}
@keyframes float{
0%{
transform: translateY(0px);
}
50%{
transform: translateY(-10px);
}
100%{
transform: translateY(0px);
}
}
</style>
</head>
<body>
<h1>歡迎來到我的網站！</h1>
<p>這里是HTML5代碼飄起來了的示例頁面。</p>
<p>下面是一段HTML5代碼，看看它能否飄起來吧！</p>
<pre><code><!-- HTML5代碼 -->
<section>
<header>
<h1>HTML5</h1>
<p>超文本標記語言</p>
</header>
<article>
<p>HTML5是最新的HTML版本。</p>
</article>
</section></code></pre>
<p><span>上面的代碼真的飄起來了！</span></p>
</body>
</html>這段HTML5代碼使用了CSS的動畫效果，通過定義關鍵幀來實現了HTML5代碼的漂浮效果。
在代碼中，我們定義了一個名為float的動畫，它的執行時間是3秒，并且無限循環。動畫通過關鍵幀在執行過程中改變代碼塊的位置，從而實現了代碼的飄動效果。
如果你也想在自己的網頁中實現這樣的效果，只需要將上面的代碼復制到你的HTML文件中，就可以實現HTML5代碼飄起來的效果啦！