CSS文字光動畫是一種非常流行的效果,可以使文字產(chǎn)生光亮、閃爍等效果,為網(wǎng)站增添動感與時尚。下面我們來看一下如何實現(xiàn)這個效果。
.shine { font-size: 5rem; background-image: linear-gradient(45deg, #f6d365, #fda085); -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: shine 2s ease-in-out infinite; } @keyframes shine { 0% { background-position: 0; } 100% { background-position: 200%; } }
以上是CSS代碼,使用的是漸變色背景,并將背景剪裁為文字形狀,同時設(shè)置文字為透明,接著設(shè)置動畫,讓光暈效果動態(tài)閃爍。
接下來我們使用p標簽演示一下:
CSS光動畫是什么嘞?
將以上代碼放入HTML頁面中即可實現(xiàn)文字光動畫的效果。
總的來說,CSS文字光動畫雖然簡單,但是為網(wǎng)站的視覺效果增添了不少亮點,讓網(wǎng)站更有生命力。
上一篇css文字分散居中