CSS是前端開發中必不可少的技術,可以實現各種各樣的頁面效果。其中,文字特效是網站設計中常見的元素之一。接下來,我們就來介紹一些CSS中簡單的文字效果。
/* 文字陰影 */ h1 { text-shadow: 2px 2px 2px #333; } /* 文字漸變 */ h2 { background: linear-gradient(to right, #00f, #f00); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* 文字旋轉 */ h3 { transform: rotate(-15deg); display: inline-block; } /* 文字斷行 */ h4 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100px; }
以上四個效果分別是:
1. 文字陰影,可以讓文字在背景上更加醒目;
2. 文字漸變,可以使文字呈現出豐富多彩的效果;
3. 文字旋轉,可以讓文字在視覺上更加有趣,吸引讀者的注意力;
4. 文字斷行,可以讓文字在顯示上更加美觀整潔,同時還可以省略過長的文本內容。
/* 轉換動畫 */ h5 { animation: myanim 2s linear infinite alternate; } @keyframes myanim { 0% { color: #f00; transform: scale(1); } 50% { color: #0f0; transform: scale(2); } 100% { color: #00f; transform: scale(1); } }
除了以上四種文字效果,我們還可以利用CSS的動畫實現更加復雜的效果。比如這里的轉換動畫,可以讓文字在顏色和大小上呈現循環變化的效果。
總之,CSS中的文字效果非常多樣化,在實踐中我們可以根據具體需求靈活運用。