<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style>
div#gradient1 span {
font-weight: bolder;
-webkit-text-stroke: 0.5px #ef7941;
background:-webkit-gradient(linear, left top, left bottom, from(#e066ff), to(#f7ce54));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 30px;
}
</style>
</head>
<body>
<div id="gradient1"><span>一二三四五, 上山打老虎</span></div>
</body>
</html>
-webkit-text-stroke 就是给文字增加边框
-webkit-background-clip: text 他的效果就是使文字内容以外的背景被剪切掉, 当这个属性与-webkit-text-fill-color填充文字透明色配合使用时, 不仅可以做到渐变的效果, 还可以做成一下几种效果:
纹理字
利用图片作文文字的背景, 也就是镂空字
#gradient2 span{
display: block;
font-weight: bolder;
background: url('./e9b0f7106e6613091f5efc2ded8eaf8a.jpg') center;
-webkit-background-clip: text;
font-size: 60px;
-webkit-text-fill-color: transparent;
}
歌词效果
@-webkit-keyframes anim{
0%{background-position: -2000px 0;}
100%{background-position: -1500px 0;}
}
#gradient3 {
background-color: gray;
}
#gradient3 span{
display: block;
font-weight: bolder;
-webkit-text-stroke: 1px #ef7941;
background: #fff url('./box6_bg.jpg') -2000px 0 no-repeat;
-webkit-background-clip: text;
font-size: 30px;
-webkit-text-fill-color: transparent;
animation:anim 10s linear infinite;
}
扫一扫
1402
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
