之前看到这个效果感觉很不错，应用起来也不算复杂，下面是效果图和代码，有兴趣的同学可以尝试一下。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>字体效果</title>
<style>
h1{
font-size: 32px;
font-weight: 550;
padding-left: 50px;
text-align: center;
letter-spacing: 1px;
position: relative;
color: transparent;
}
.bg{
position: relative;
background-color: #ff791a;
text-align: center;
height: 200px;
overflow: hidden;
}
.title{
background-clip: text;
-webkit-background-clip: text;
background-image:linear-gradient(196deg,#ef951b 18%,#fff8eb 50%,#ef951b 79%);
z-index: 1;
}
.titleShadow{
text-align: center;
text-shadow: 0 2px 4px rgba(178,103,27,.43);
margin-top:-61px;
}
</style>
</head>
<body>
<div class="bg">
<h1 class="title">让我们开始新征程吧</h1>
<h1 class="titleShadow">让我们开始新征程吧</h1>
</div>
</body>
</html>
8264
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
