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