HTML 文字飄動代碼
代碼演示：
<!DOCTYPE html>
<html>
<head>
<title>HTML 文字飄動效果</title>
<style>
/* 設置文字樣式 */
.float-text {
font-size: 40px;
color: #ff0000;
position: absolute;
}
/* 設置動畫效果 */
@keyframes float {
0% {
transform: translate(0, 0);
}
50% {
transform: translate(0, 30px);
}
100% {
transform: translate(0, 0);
}
}
</style>
</head>
<body>
<div class="float-text">你好，我是文字飄動效果！</div>
</body>
<script>
// 獲取元素，添加動畫效果
var text = document.querySelector('.float-text');
text.style.animation = 'float 2s infinite ease-in-out';
</script>
</html>
代碼說明：
代碼中使用了animation屬性來控制文字的飄動效果，其中使用了@keyframes定義了動畫的關鍵幀，從而實現(xiàn)文字的周期性移動。
文字飄動效果可以應用于網(wǎng)站上的頁面裝飾，使得頁面變得更加潮流、個性化，給人留下深刻印象。