CSS3 文字火焰效果是一種常見的文本樣式,它可以讓文字變得更加生動和有趣。下面我們提供一份 CSS3 文字火焰的代碼示例,供大家參考。
.fire-text{ color:#f00; /*設置文字顏色為紅色*/ font-size:60px; /*設置文字大小*/ font-weight:bold; /*設置文字加粗*/ text-shadow:0px 0px 5px #f00; /*設置文字陰影*/ animation:fire-anim 1s infinite alternate; /*設置動畫效果*/ -webkit-animation:fire-anim 1s infinite alternate; /*兼容webkit瀏覽器*/ } @keyframes fire-anim{ 0%{ text-shadow:0px 0px 5px #f00; /*設置文字陰影*/ } 50%{ text-shadow:0px 0px 20px #f00; /*設置文字陰影*/ } 100%{ text-shadow:0px 0px 5px #f00; /*設置文字陰影*/ } } @-webkit-keyframes fire-anim{ 0%{ text-shadow:0px 0px 5px #f00; /*設置文字陰影*/ } 50%{ text-shadow:0px 0px 20px #f00; /*設置文字陰影*/ } 100%{ text-shadow:0px 0px 5px #f00; /*設置文字陰影*/ } }
上述代碼中,我們給文字設置了顏色、大小、加粗、陰影等樣式,并在文字上應用了一個名為 fire-anim 的動畫效果。這個動畫效果會讓文字的陰影在 1 秒鐘內不斷閃爍,從而形成火焰燃燒的效果。
通過使用 CSS3 文字火焰效果,我們可以為網站中的文字內容增加一些動態元素,從而令頁面更加生動有趣。希望上述代碼對大家有所幫助!
上一篇php apc 安裝
下一篇css3 拖拽熟悉