用CSS文本阴影创建嬉戏效果

让我们看一下如何使用CSS文本阴影属性来创建真正的3D外观文本。您可能会认为文字阴影能够在文本后面涂上模糊，梯度外观的颜色，您将是对的！但是，就像盒子阴影一样，您可以控制阴影有多模糊，包括将其完全降低到没有模糊。结合逗号分开的阴影并堆叠它们，就是我们将在这里做的CSS骗局。

到最后，我们将有一些看起来像这样的东西：

快速刷新文字阴影

语法是这样的：

 .el {
 文本阴影：[x-fartset] [y-offset] [blur] [color];
}

• X折：位于X轴上。正值将阴影向右移动，负值将阴影向左移动。 （必需的）
• Y-Orkset：Y轴上的位置。正值将阴影移至底部，负值将阴影移至顶部。 （必需的）
• 模糊：阴影应该有多少模糊。值越高，阴影越柔软。默认值为0px（无模糊）。 （选修的）
• 颜色：阴影的颜色。 （必需的）

第一个阴影

让我们开始通过仅添加一个阴影来创造效果。阴影将向右侧向右侧推动6px，底部将6px推到6px：

 ：根 {
 -Text：＃5362f6; /* 蓝色的 */
  - 阴影：＃e485f8; /* 粉色的 */
}


.playful {
 颜色：var（ - 文本）;
 文本阴影：6px 6px var（ -  shadow）;
}

用更多阴影创建深度

目前，我们只有一个平坦的阴影 - 还没有太多的3D。我们可以通过将更多文本阴影实例添加到同一元素来创建深度并将阴影连接到实际文本。它所需要的只是分类它们。让我们从中间添加一个开始：

 .playful {
 颜色：var（ - 文本）;
 文本阴影：6px 6px var（ - 阴影），
        3PX 3PX var（ - 阴影）;
}

这已经到了某个地方，但是我们需要添加更多阴影才能使其看起来不错。我们添加的步骤越多，最终结果就越详细。在此示例中，我们将从6PX 6PX开始，并以0.25px增量逐渐构建，直到达到0。

 .playful {
 颜色：var（ - 文本）;
 文字阴影： 
  6px 6px var（ - 阴影）， 
  5.75px 5.75px var（ - 阴影）， 
  5.5px 5.5px var（ - 阴影）， 
  5.25px 5.25px var（ - 阴影），
  5px 5px var（ - 阴影）， 
  4.75px 4.75px var（ - 阴影）， 
 4.5px 4.5px var（ - 阴影）， 
  4.25px 4.25px var（ - 阴影），
 4px 4px var（ - 阴影），
  3.75px 3.75px var（-shadow），
 3.5px 3.5px var（ - 阴影），
  3.25px 3.25px var（-shadow），
  3px 3px var（ - 阴影），
  2.75px 2.75px var（-shadow），
   2.5px 2.5px var（ - 阴影），
  2.25px 2.25px var（-shadow），
   2px 2px var（ - 阴影），
  1.75px 1.75px var（ - 阴影），
  1.5px 1.5px var（ - 阴影），
   1.25px 1.25px var（ - 阴影），
  1px 1px var（-shadow），
   0.75px 0.75px var（ - 阴影），
  0.5px 0.5px var（ - 阴影），
 0.25px 0.25px var（ - 阴影）;
}

用SASS简化代码

结果可能看起来不错，但是现在的代码很难读取和编辑。如果我们想使影子更大，我们必须进行大量复制和粘贴才能实现它。例如，将阴影大小提高到10px将意味着手动增加16个阴影。

这就是SCSS出现的地方。我们可以使用函数来自动生成所有阴影。

 @function textshadow（$ precision，$ size，$ color）{
 $ value：null; 
 $偏移：0;
 $长度：$ size *（1 / $ precision）-1;


 @for $ i从0到$ length {
  $偏移：$ offset $ precision;
  $ shadow：$ offset px $ offse px $ color;
  $ value：append（$ value，$ shadow，comma）;
 }


 @return $ value;
}


.playful {
 颜色：＃5362F6;
 文本阴影：textshadow（0.25，6，＃e485f8）;
}

函数文本莎多（TextShadow）采用三个不同的参数：阴影的精度，大小和颜色。然后，它创建一个循环，其中偏移量增加了$ PRICINE（在这种情况下为0.25px），直到达到阴影的总尺寸（在这种情况下为6px）。

这样，我们可以轻松地增加阴影的大小或精度。例如，要创建一个10px大的阴影，并以0.1px的形式增加，我们只需要在代码中更改它：

文本阴影：textshadow（0.1，10，＃e485f8）;

交替的颜色

我们希望通过购买交替的颜色来稍微增添一点东西。我们将用包裹在跨度包裹的单个字母中（可以手动完成，也可以使用React或JavaScript自动化）。输出看起来像这样：

 <p aria-label="“洗手！”">
 <span aria-hidded="“" true> w </span> <span aria-hidded="“" true> a </span> <span aria aria-hidded="“" true> s </span> <span aria aria-hidded="“" true> h </span> h  ...
</p>

然后，我们可以在跨度上使用：nth-​​child（）选择器来更改其文本和阴影的颜色。

 .playful跨度：nth-​​child（2n）{
 颜色：＃ED625C;
 文本阴影：textshadow（0.25，6，＃f2a063）;
}

如果我们在香草CSS中做到了这一点，那么这就是我们最终得到的：

 .playful跨度{
 颜色：var（ - 文本）;
 文字阴影： 
  6px 6px var（ - 阴影），
  5.75px 5.75px var（ - 阴影），
  5.5px 5.5px var（ - 阴影），
  5.25px 5.25px var（ - 阴影），
  5px 5px var（ - 阴影），
  4.75px 4.75px var（ - 阴影），
  4.5px 4.5px var（ - 阴影），
  4.25px 4.25px var（ - 阴影），
  4px 4px var（ - 阴影），
  3.75px 3.75px var（-shadow），
  3.5px 3.5px var（ - 阴影），
  3.25px 3.25px var（-shadow），
  3px 3px var（ - 阴影），
  2.75px 2.75px var（-shadow），
  2.5px 2.5px var（ - 阴影），
  2.25px 2.25px var（-shadow），
  2px 2px var（ - 阴影），
  1.75px 1.75px var（ - 阴影），
  1.5px 1.5px var（ - 阴影），
  1.25px 1.25px var（ - 阴影），
  1px 1px var（-shadow），
  0.75px 0.75px var（ - 阴影），
  0.5px 0.5px var（ - 阴影），
  0.25px 0.25px var（ - 阴影）;
}


.playful跨度：nth-​​child（2n）{
 -Text：＃ED625C;
  - 阴影：＃f2a063;
}

我们可以用其他颜色和索引重复几次，直到达到我们喜欢的模式：

奖励积分：添加动画

使用相同的原理，我们可以通过添加动画来使文本更加栩栩如生。首先，我们将添加一个重复的动画，使每个跨度上下移动：

 .playful跨度{
 颜色：＃5362F6;
 文本阴影：textshadow（0.25，6，＃e485f8）;
 位置：相对；
 动画：散射1.75s无限；
}

我们可以使用偏爱的动作媒体查询来进一步优化它。这样，不想动画的人们就不会得到它。

 .playful跨度{
  颜色：＃5362F6;
  文本阴影：textshadow（0.25，6，＃e485f8）;
  位置：相对；
  动画：散射1.75s无限；
}

@Media屏幕和（预先减少的动作：降低）{
  动画：无；
}

然后，在每个nth-child（n）中，我们将添加不同的动画延迟。

 .playful跨度：nth-​​child（2n）{
 颜色：＃ED625C;
 文本阴影：textshadow（0.25，6，＃f2a063）;
 动画 - 延迟：0.3s;
}

以上是用CSS文本阴影创建嬉戏效果的详细内容。更多信息请关注PHP中文网其他相关文章！