css3到底有多强大，文字还能这样玩?

Posted 2021-04-09 100素材网

（给100素材网点亮★号，提升开发技能）

说起 background-clip ，可能很多人都很陌生。Clip 的意思为修剪，那么从字面意思上理解，background-clip 的意思即是背景裁剪。下面我们通过以下几个属性值制作css3文字忽大忽小颜色动画效果。

1、设置颜色值

2、背景裁剪

3、文字加阴影

4、文字加动画

linear-gradient设置12种状态颜色值：

hsl(0, 75%, 50%) 10%,

hsl(20, 75%, 50%) 10%,

hsl(20, 75%, 50%) 25%,

hsl(50, 75%, 50%) 25%,

hsl(50, 75%, 50%) 40%,

hsl(130, 75%, 50%) 40%,

hsl(130, 75%, 50%) 55%,

hsl(200, 75%, 50%) 55%,

hsl(200, 75%, 50%) 70%,

hsl(260, 75%, 50%) 70%,

hsl(260, 75%, 50%) 85%,

hsl(0, 75%, 50%) 85%

背景裁剪：-webkit-background-clip: text;

文字加阴影：text-shadow

文字加动画：

@keyframes BeProud

@keyframes Always

效果图：

html代码：

<h1>#PrideMonth❤</h1>

css代码：

给文字添加基础的style值，设置背景色和文字颜色，阴影效果，引用动画，文字居中，背景裁剪

h1 {
  font-family: 'Bowlby One SC', cursive;
  font-size: 10vw;
  width: 100vw;
  margin-top: calc(50vh - 10vw);
  text-align: center;
  background: linear-gradient(
    60deg,
    hsl(0, 75%, 50%) 10%,
    hsl(20, 75%, 50%) 10%,
    hsl(20, 75%, 50%) 25%,
    hsl(50, 75%, 50%) 25%,
    hsl(50, 75%, 50%) 40%,
    hsl(130, 75%, 50%) 40%,
    hsl(130, 75%, 50%) 55%,
    hsl(200, 75%, 50%) 55%,
    hsl(200, 75%, 50%) 70%,
    hsl(260, 75%, 50%) 70%,
    hsl(260, 75%, 50%) 85%,
    hsl(0, 75%, 50%) 85%
  );

  text-shadow: 0.5px -0.6vw #fff4;
  color: #fff;
  -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: 10s BeProud linear infinite,
    3s Always ease alternate infinite;
}

给文字加@keyframes动画

@keyframes BeProud {
  100% { background-position: 100vw 0px; }
}
@keyframes Always {
  100% { transform: scale(1.1);}
}