CSS 字體動畫是一種可以讓文字具有動態效果的技術。通常,它用于網頁設計中,以吸引用戶的注意力并增強頁面的吸引力。下面是一些實現 CSS 字體動畫的方法。
/* 方法一:使用 @keyframes */ @keyframes glow { 0% { color: #fff; text-shadow: 0 0 20px #fff; } 50% { color: #f00; text-shadow: 0 0 30px #f00; } 100% { color: #fff; text-shadow: 0 0 20px #fff; } } h1 { font-size: 60px; animation: glow 2s ease-in-out infinite; } /* 方法二:使用 transition */ h2 { font-size: 40px; color: #333; transition: all 0.2s; } h2:hover { font-size: 50px; color: #f00; } /* 方法三:使用 transform */ h3 { font-size: 30px; color: #333; transform: rotate(0deg); transition: all 0.2s; } h3:hover { transform: rotate(360deg); color: #f00; }
總之,CSS 字體動畫提供了一種簡單而有效的方式,使網頁內容更具吸引力和獨特性。
上一篇css字體凸顯效果