CSS3 是目前前端開發中最常使用的樣式語言之一,其新增的一系列文本特效使得網頁設計更加靈活多樣。 下面我們就來介紹一些常見的 CSS3 文本特效。
/* 字體陰影 */ .box { text-shadow: 1px 1px 1px #ccc; } /* 文本漸變 */ .box { background: linear-gradient(to right, #f00, #ff0, #0f0, #00f); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* 填充輪廓 */ .box { -webkit-text-stroke: 1px #f00; color: #fff; } /* 文字出現動畫 */ .box { animation: fadeIn 2s; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* 文字消失動畫 */ .box { animation: fadeOut 2s; } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
以上就是關于 CSS3 文本特效的簡單介紹。當然,除了上面所列的幾種特效之外,CSS3 還有很多強大的文本效果,可以根據具體需求進行設置,為網頁增加更多的美感和魅力。
上一篇php ascii 轉換
下一篇css3 旋轉特性