CSS3 中有許多酷炫的效果,其中的粒子匯聚字效果是其中的佼佼者。該效果可以讓文字逐漸從粒子中形成出來,并且可以自定義粒子的形狀和顏色,非常醒目。
/* CSS樣式 */ body{ background-color: #000; } #text{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 10em; color: #fff; font-family: 'Montserrat'; text-transform: uppercase; } .particle{ position: absolute; border-radius: 50%; background-color: #fff; animation: particle 2s linear infinite; } @keyframes particle{ 0%{ transform: scale(0); opacity: 1; } 50%{ transform: scale(1.2); opacity: 0.5; } 100%{ transform: scale(1.5); opacity: 0; } }
如上所示,頁面背景設置為黑色,字體為Montserrat,用于呈現高質量的文本效果。在CSS代碼中定義了一個粒子類,其中動畫可以讓粒子對象逐漸擴大和消失。通過CSS和JavaScript的結合,可以使用作為動畫的文本的定義元素來創建復雜的動態文字效果。這種效果非常醒目,并且可以進一步優化。這是 CSS3 中的一個非常有趣的動畫效果,可以在許多場合中使用,例如動態文本效果和展示頁面效果等。