纯CSS实现文字渐变和文字扫光动画效果

前面介绍过《使用CSS创建的霓虹灯效果/发光效果文本》，今天再介绍如何使用纯CSS实现文字渐变和文字扫光动画效果。

文字渐变

文字扫光动画效果

文字扫光动画效果

demodownload

上面实例中，第一个是黑白渐变效果，第二个则是扫过动画效果。下面介绍如何通过CSS来实现。

CSS代码

:root {
  --gradient: linear-gradient(225deg, transparent, black);
  --gradient2: linear-gradient(to right,
    /* This combination makes the animation look continuous. */
    purple,
    red, orange, yellow, green, blue, purple,
    red, orange, yellow, green, blue, purple
  );
}

body {
  font-family: sans-serif;
}

p {
  max-width: 35rem;
}

.mdnlink {
  font-family: monospace;
}

.demo {
  width: 7em;
  font-size: 5rem;
  font-weight: bold;
  font-family: 'Arial Black', sans-serif;
  white-space: nowrap;
  overflow: hidden;
}

.mask-image {
  mask-image: var(--gradient);
  -webkit-mask-image: var(--gradient);
}

.background-clip {
  background: var(--gradient2);
  background-size: 200%;
  background-clip: text;
  -webkit-background-clip: text;
  background-position: left;
  color: transparent;
  margin: 0;
  padding: 0;
}

#animate:checked ~ .background-clip {
  animation: animate 5s infinite linear;
}

@keyframes animate {
  to {
    background-position: right;
  }
}

HTML代码

文字渐变

<div class="demo mask-image">Hello World</div>

文字扫过动画

<input id="animate" type="checkbox" checked><label for="animate">让它动起来！</label>
<div class="demo background-clip">Hello World</div>

execcodegetcode

代码解释

1、文字渐变使用了CSS的 mask-image 属性。mask-image 属性用作元素遮罩层的图像。默认情况下，这意味着遮罩图像的alpha通道将与元素的alpha通道相乘。

2、文字扫过效果使用了 background-clip 属性，background-clip 属性规定背景的绘制区域。background-clip 设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面。

如果没有设置背景图片（background-image）或背景颜色（background-color），那么这个属性只有在边框（ border）被设置为非固实（soild）、透明或半透明时才能看到视觉效果（与 border-style 或 border-image 有关），否则，本属性产生的样式变化会被边框覆盖。

3、文字扫光动画效果CSS代码

#animate:checked ~ .background-clip {
  animation: animate 5s infinite linear;
}
@keyframes animate {
  to {
    background-position: right;
  }
}

当 id=animate 的复选框被选中时，触发动画。

4、文字扫过颜色设置

:root {
  --gradient: linear-gradient(225deg, transparent, black);
  --gradient2: linear-gradient(to right,
    /*  下面的颜色组合设置文字颜色. */
    purple,
    red, orange, yellow, green, blue, purple,
    red, orange, yellow, green, blue, purple
  );
  --gradient3: linear-gradient(to right,
    /*  下面的颜色组合设置文字颜色. */
    black,
    black, white, 
    black, white
  );
}

下面文章您可能也感兴趣

• 3个使用CSS创建的霓虹灯效果/发光效果文本