CSS讓字體動起來是一種常見的網頁設計技巧,可以增加頁面的互動性和視覺效果。以下是一些常用的方法和代碼示例。
/* 使用@keyframes和animation屬性 */ @keyframes move { from {transform: translateX(0px);} to {transform: translateX(50px);} } h1 { animation: move 1s infinite alternate; } /* 使用transform和transition屬性 */ h2 { transition: transform 1s ease-in-out; } h2:hover { transform: rotate(45deg); } /* 使用text-shadow屬性 */ h3 { text-shadow: 0 0 10px #fff; transition: text-shadow 1s ease-out; } h3:hover { text-shadow: 0 0 20px #fff, 0 0 30px #f00, 0 0 40px #0f0, 0 0 50px #00f, 0 0 60px #ff0, 0 0 70px #0ff, 0 0 80px #f0f, 0 0 90px #fff; } /* 使用animation和steps屬性 */ h4 { animation: typing 3s steps(20, end); white-space: nowrap; overflow: hidden; border-right: .15em solid orange; } @keyframes typing { from {width: 0;} to {width: 100%;} }
以上方法可以實現不同的效果,如橫向移動、旋轉、陰影擴散、文字逐字出現等。通過調整CSS屬性值和使用不同的CSS屬性組合,還可以創造更多的動態效果。
上一篇css讓字體往右移動
下一篇css讓字體旋轉90度