CSS3中文字過渡是一種非常常用的技術,可以讓文字變得生動有趣,在頁面中吸引用戶的注意力。下面我們來了解一下如何實現文字過渡效果。
/* 基本的文字過渡 */ p { transition: color 0.3s ease-in-out; } p:hover { color: #ff0000; } /* 文字下劃線過渡 */ p { position: relative; } p::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background-color: #000; transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease-in-out; } p:hover::after { transform: scaleX(1); } /* 文字陰影過渡 */ p { text-shadow: 0 0 0 transparent; transition: text-shadow 0.3s ease-in-out; } p:hover { text-shadow: 0 0 5px #000; } /* 文字出現過渡 */ p { opacity: 0; transition: opacity 0.3s ease-in-out; } p:hover { opacity: 1; } /* 文字大小過渡 */ p { font-size: 16px; transition: font-size 0.3s ease-in-out; } p:hover { font-size: 20px; }
注意,以上代碼均需要在瀏覽器中查看效果。除此之外,CSS3還支持許多其他的過渡效果,可以根據實際需要進行實現。