如果要为渐变文本设置
因此，我试图在动画渐变中添加白色文本阴影/轮廓，但无论何时，文本都会变成全白色，并且渐变不适用。
如果有人能在这里帮助我，那将非常感谢
梯度代码：
.linear-wipe {
background: linear-gradient(to right, #00008B 15%, red 35%, red 50%, #00008B 70%);
background-size: 200% auto;
background-clip: text;
text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: shine 5s linear infinite;
}
@keyframes shine {
to {
background-position: 200% center;
}
}
阴影/轮廓代码：
text-shadow:
-0.2px 0px 1px white,
0px 0.2px 1px white,
0.2px 0px 1px white,
0px -0.2px 1px white;
你可以在这里看到问题。如果删除"文本阴影"位，渐变效果良好，但有了它，文本就会变白：https://codepen.io/anon/pen/wQvexd
text-shadow，请使用afterpsuedo元素；
这里我试了一些
body{
background-color:black;
}
.linear-wipe {
background: linear-gradient(to right, #00008B 15%, red 35%, red 50%, #00008B 70%);
background-size: 200% auto;
background-clip: text;
text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
position:absolute;
animation: shine 5s linear infinite;
}
.linear-wipe:after {
background: none;
content: attr(data-text);
left: 0;
position: absolute;
text-shadow:
-0.2px 0px 1px white,
0px 0.2px 1px white,
0.2px 0px 1px white,
0px -0.2px 1px white;
top: 0;
z-index: -1;
}
@keyframes shine {
to {
background-position: 200% center;
}
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<h1 class="linear-wipe" data-text="Hello World">Hello World</h1>
</body>
</html>