8

【css灵感】渐变字

 1 year ago
source link: https://www.msy.plus/2021/12/20/css-inspiration-gradient-font/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

【css灵感】渐变字

发表于2021-12-20更新于2023-05-04字数统计339阅读次数70阅读次数59

直接上效果

【css灵感】渐变字

方法一：借助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>
------ 本文结束，感谢您的阅读 ------
Share to:
请我喝杯咖啡~

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK