文字渐变需要了解以下属性:
background-image:背景色
background-clip:此属性规定背景的绘制区域,有四个值:
- border-box,背景被裁剪到边框盒。
- padding-box,背景被裁剪到内边距框。
- content-box,背景被裁剪到内容。
- text,表示只显示文字区域。
-webkit-text-fill-color:文字填充色,实现文字渐变色要展示的是背景的渐变颜色,所以这里我们需要设置为transparent( 寻常的- webki t-表示的是Chrome和Safari的私有属'性,但是它却声明了所有的,除了IE浏览器))
-webkit-text-stroke:1px black;实现镂空文字(文字边框)
详细可参考:[CSS] 🌈在字间流淌 | 第十二期_哔哩哔哩_bilibili
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
body {
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
}
p {
font-size: 4vh;
font-weight: 600;
background-clip: text;
-webkit-background-clip: text;
/*这次的这句和以往不一样*/
/* 以往是 考虑低版本浏览器*/
/*这次就连最新版Chrome和Safari都得 */
/*注意是background-clip: text;需要 */
/*如果是: content啊之 类的就没这么苛刻的*/
-webkit-text-fill-color: transparent;
/*这个属性的- webkit前缀也比较特殊 */
/*寻常的- webki t-表示的是Chrome和Safari的私有属'性*/
/*但是它却声明了所有的(除了IE浏览器)*/
background-image:
linear-gradient(90deg,
rgb(255, 167, 69),
rgb(254, 134, 159),
rgb(239, 122, 200),
rgb(160, 131, 237),
rgb(67, 174, 255),
rgb(160, 131, 237),
rgb(239, 122, 200),
rgb(254, 134, 159),
rgb(255, 167, 69));
background-size: 200%;
}
p:hover {
animation: streamer 2s linear infinite;
}
@keyframes streamer {
0% {
background-position: 0%;
}
100% {
background-position: 200%;
}
}
</style>
</head>
<body>
<p>何以与君识,无言泪千行</p>
</body>
</html>