CSS 如何实现五彩斑斓的“呼吸字”？速度拿去装杯！

用纯 CSS 实现就可以了，代码其实也很精简，完整代码：

* {

  box-sizing: border-box;

}

body {

  display: grid;

  place-items: center;

  min-height: 100vh;

  background: hsl(0 0% 20%);

}

.boujee-text {

  --bg-size: 400%;

  --color-one: hsl(15 90% 55%);

  --color-two: hsl(40 95% 55%);

  font-size: clamp(3rem, 25vmin, 8rem);

  background: linear-gradient(

                90deg,

                var(--color-one),

                var(--color-two),

                var(--color-one)

              ) 0 0 / var(--bg-size) 100%;

  color: transparent;

  background-clip: text;

  -webkit-background-clip: text;

  animation: move-bg 8s infinite linear;

}

@media (prefers-reduced-motion: no-preference) {

  .boujee-text {

    animation: move-bg 8s linear infinite;

  }

  @keyframes move-bg {

    to {

      background-position: var(--bg-size) 0;

    }

  }

}

复制代码

如果不想看原理，直接拿去用~

如果想了解原理，继续往下看，同样也很简单。

实现步骤：

先给 body 加个偏深的背景色，这是可选项，按你喜欢的来。

body {

  display: grid;

  place-items: center;

  min-height: 100vh;

  background: hsl(0 0% 20%);

}

复制代码

设置 font-size clamp 属性；

.boujee-text {

  font-size: clamp(3rem, 25vmin, 12rem);

}

复制代码

clamp 的目的只是为了控制文本的大小在一个范围值内，不清楚用法请阅读 ☞ MDN

设置背景色为渐变色，并将其旋转 90 度；

.boujee-text {

  --color-one: hsl(15 90% 55%);

  --color-two: hsl(40 95% 55%);

  font-size: clamp(3rem, 25vmin, 8rem);

  background: linear-gradient(

                90deg,

                var(--color-one),

                var(--color-two),

                var(--color-one)

              ) 0 0 / 100% 100%;

}

复制代码

设置 background-size-x，--bg-size: 400%;

.boujee-text {

  --bg-size: 400%;

  --color-one: hsl(15 90% 55%);

  --color-two: hsl(40 95% 55%);

  font-size: clamp(3rem, 25vmin, 8rem);

  background: linear-gradient(

                90deg,

                var(--color-one),

                var(--color-two),

                var(--color-one)

              ) 0 0 / var(--bg-size) 100%;

}

复制代码

将背景色应用到文本上，background-clip: text  这一步是最关键的！！

.boujee-text {

  --bg-size: 400%;

  --color-one: hsl(15 90% 55%);

  --color-two: hsl(40 95% 55%);

  font-size: clamp(3rem, 25vmin, 8rem);

  background: linear-gradient(

                90deg,

                var(--color-one),

                var(--color-two),

                var(--color-one)

              ) 0 0 / var(--bg-size) 100%;

  color: transparent;

  -webkit-background-clip: text;

  background-clip: text;

}

复制代码

接着为文本的颜色设置动画，先设关键帧；

@keyframes move-bg {

  to {

    background-position: var(--bg-size) 0;

  }

}

复制代码

然后设置 animation 属性：

.boujee-text {

  --bg-size: 400%;

  --color-one: hsl(15 90% 55%);

  --color-two: hsl(40 95% 55%);

  font-size: clamp(3rem, 25vmin, 8rem);

  background: linear-gradient(

                90deg,

                var(--color-one),

                var(--color-two),

                var(--color-one)

              ) 0 0 / var(--bg-size) 100%;

  color: transparent;

  background-clip: text;

  -webkit-background-clip: text;

  animation: move-bg 8s infinite linear;

}

复制代码

最后，你可以自己根据媒体查询设置不同的动作；

@media (prefers-reduced-motion: no-preference) {

  .boujee-text {

    animation: move-bg 8s linear infinite;

  }

  @keyframes move-bg {

    to {

      background-position: var(--bg-size) 0;

    }

  }

}

复制代码

综上，background-clip 属性是关键！！

赶紧在你的项目中使用起来吧，兼容性挺好~~