純 CSS 文字動畫是一種使用 CSS 技術來實現文字動畫的方法,它不需要使用 JavaScript 或其他工具,只需要利用 CSS 的屬性來實現。下面我們將通過一些實例來介紹常見的純 CSS 文字動畫類型。
/* 左右滾動動畫 */ @keyframes text-scroll { 0% { text-indent: 0; } 100% { text-indent: -200px; } } .text-scroll { white-space: nowrap; overflow: hidden; animation: text-scroll 5s linear infinite; } /* 透明度切換動畫 */ @keyframes text-fade { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } .text-fade { animation: text-fade 3s linear infinite; } /* 放大縮小動畫 */ @keyframes text-zoom { 0% { transform: scale(1); } 50% { transform: scale(1.5); } 100% { transform: scale(1); } } .text-zoom { animation: text-zoom 3s linear infinite; }
左右滾動動畫使用@keyframes
定義了一個滾動的動畫,同時在.text-scroll
類中應用了該動畫,并設置了文字的white-space
為nowrap
,這樣使得文字不會換行,從而實現了左右滾動的效果。
透明度切換動畫使用@keyframes
定義了一個透明度切換的動畫,同時在.text-fade
類中應用了該動畫,并設置了動畫時間為3s
,實現了透明度切換的效果。
放大縮小動畫使用@keyframes
定義了一個放大縮小的動畫,同時在.text-zoom
類中應用了該動畫,并設置了動畫時間為3s
,實現了放大縮小的效果。