【css靈感】漸變字
阿新 • • 發佈:2021-12-20
直接上效果
看不到效果點這裡
方法一:藉助mask-image屬性
從CSS程式碼可以看出,效果的實現除了“content內容生成技術”以外,主要是使用了mask-image屬性,內容則是“webkit核心瀏覽器下的漸變”了。
<h2 class="text-gradient" data-text="【css靈感】漸變字">【css靈感】漸變字</h2> <style> .text-gradient { display: inline-block; font-family: '微軟雅黑'; font-size: 10em; position: relative; } .text-gradient[data-text]::after { content: attr(data-text); color: green; position: absolute; left: 0; z-index: 2; -webkit-mask-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0))); } </style>
方法二:background-clip + text-fill-color下的實現
此方法雖然使用的CSS屬性相對多些,但是結構簡單,易於控制,顏色的選取與控制也更精確,理解上也更容易理解。我個人是推薦使用方法二的。
<h1 class="text-gradient">【css靈感】漸變字</h1> <style> .text-gradient { display: block; color: green; font-size: 4em; text-align:center; font-family: '微軟雅黑'; background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#ebeef2), to(#2e9fff)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }; </style>
看不到效果點這裡
本文來自部落格園,作者:墨抒穎,轉載請註明原文連結:https://www.cnblogs.com/moshuying/p/15710991.html