在CSS中,可以使用@keyframes
規(guī)則和animation
屬性來實現(xiàn)文字的熒光閃爍效果。這段代碼定義了一個twinkling的關(guān)鍵幀動畫,在白色的RGB值上改變透明度,實現(xiàn)閃爍的效果。.twinkling-text類使用這個動畫,通過animation屬性設(shè)置了動畫的持續(xù)時間、循環(huán)次數(shù)和是否反向播放。以下是一個簡單的例子:
<p class=“twinkling-text”>閃爍的文字效果</p>
<style>
@keyframes twinkling { 0% {
color: rgba(255, 255, 255, 0.2); /* 半透明的白色 */
} 50% {
color: rgba(255, 255, 255, 0.8); /* 較亮的白色 */
} 100% {
color: rgba(255, 255, 255, 0.2); /* 回到原來的顏色 */
} }
.twinkling-text { animation: twinkling 1s infinite alternate; /* 每秒閃爍一次,無限循環(huán),交替方向播放 */ }
</style>