问题

我想要应用闪烁文本效果（https://codepen.io/fazlurr/pen/qbWMRv）

.shine {
// 设置背景
background: #222 -webkit-gradient(linear, left top, right top, from(#222), to(#222), color-stop(0.5, #fff)) 0 0 no-repeat;
-webkit-background-size: 150px;
color: $text-color;
-webkit-background-clip: text;
-webkit-animation-name: shine;
-webkit-animation-duration: $duration;
-webkit-animation-iteration-count: infinite;
text-shadow: 0 0px 0px rgba(255, 255, 255, 0.5);
}

和渐变文本效果（https://cssgradient.io/blog/css-gradient-text/）

h1 {
font-size: 72px;
background: -webkit-linear-gradient(#eee, #333); // 设置背景
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

**同时**。 **闪烁文本和渐变文本的颜色不同**。 我看到这两种效果都需要设置背景和“-webkit-background-clip: text”，所以我无法实现理想的效果（为一个设置背景会覆盖另一个）。 有没有办法同时应用这两种效果？

<details>
<summary>英文:</summary>

I want to apply shining text effect (https://codepen.io/fazlurr/pen/qbWMRv) 

.shine {
// set background
background: #222 -webkit-gradient(linear, left top, right top, from(#222), to(#222), color-stop(0.5, #fff)) 0 0 no-repeat;
-webkit-background-size: 150px;
color: $text-color;
-webkit-background-clip: text;
-webkit-animation-name: shine;
-webkit-animation-duration: $duration;
-webkit-animation-iteration-count: infinite;
text-shadow: 0 0px 0px rgba(255, 255, 255, 0.5);
}

and gradient text (https://cssgradient.io/blog/css-gradient-text/) 

h1 {
font-size: 72px;
background: -webkit-linear-gradient(#eee, #333); // set background
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

**at the same time**. **The color for shining text and gradient text are different**. I saw both effect need to set background and "-webkit-background-clip: text", so I can't achieve the desirable result (setting background for one override another). Is there any way to apply these 2 effects at the same time?

</details>


# 答案1
**得分**: 1

你需要多个背景，并确保检查在线找到的演示和文章的日期。您正在使用的闪光效果非常古老，并且使用了过时的语法。

```html
<h1>闪光如钻石般明亮</h1>

相关链接: https://stackoverflow.com/q/55989735/8620333

h1 {
  font-size: 72px;
  font-weight: bold;
  font-family: sans-serif;
  background: 
    /* the shine layer */
    linear-gradient(-45deg, #0000 40%,#fff5,#0000 60%)
     right/300% 100%,
    /* the color layer*/
    linear-gradient(45deg,red, blue);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color:#000;
  animation: shine 2s infinite;
}

@keyframes shine {
  to {background-position: left;}
}

body {
 background: #000;
}

<h1>Shine Bright Like a Diamond</h1>