Question

因此，我试图在动画渐变中添加白色文本阴影/轮廓，但是每当我这样做时，文本就会变成全白，并且渐变不适用。

如果有人可以在这里帮助我，那将不胜感激

渐变代码：

.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

Answer 1

如果要为渐变文字设置after，请使用text-shadow伪元素；

我在这里尝试过一些东西

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>

将文字阴影与动画渐变配合使用

1 个答案: