网站建设之使用CSS文字阴影创建有趣的效果

让我们看一下如何使用CSS text-shadow属性创建真正的3D文本。您可能会认为文本阴影可以在文本后面应用模糊,渐变的颜色,这是正确的!但是,就像盒子阴影一样,您可以控制阴影的模糊程度,包括将阴影一直降低到完全不模糊。结合使用逗号分隔的阴影并将其堆叠在一起,这就是我们在这里要做的CSS技巧。 到最后,我 WP网站建设

让我们看一下如何使用CSS text-shadow属性创建真正的3D文本。您可能会认为文本阴影可以在文本后面应用模糊,渐变的颜色,这是正确的!但是,就像盒子阴影一样,您可以控制阴影的模糊程度,包括将阴影一直降低到完全不模糊。结合使用逗号分隔的阴影并将其堆叠在一起,这就是我们在这里要做的CSS技巧。

到最后,我们将得到如下所示的内容:

WordPress网站建设

WordPress网站建设

在文本阴影上快速复习

语法如下:

.el {
  text-shadow: [x-offset] [y-offset] [blur] [color];
}
  • x-offset:在x轴上的位置。正值将阴影向右移动,负值将阴影向左移动。(需要)
  • y-offset:在y轴上的位置。正值将阴影移到底部,负值将阴影移到顶部。(需要)
  • blur:阴影应该有多少模糊。值越高,阴影越柔和。默认值为0px(无模糊)。(可选的)
  • color:阴影的颜色。(需要)

WordPress网站建设

WordPress网站建设

第一个阴影

让我们通过仅添加一个阴影开始创建效果。阴影将向右推6px,向底部推6px:

:root {
  --text: #5362F6; /* Blue */
  --shadow: #E485F8; /* Pink */
}.playful {
  color: var(--text);
  text-shadow: 6px 6px var(--shadow);
}
WordPress网站建设

WordPress网站建设

创建更多阴影的深度

此时,我们所拥有的只是一个平坦的阴影-还没有太多的3D效果。通过将更多text-shadow实例添加到同一元素,我们可以创建深度并将阴影连接到实际文本。它所要做的就是用逗号分隔它们。让我们从中间添加一个开始:

.playful {
  color: var(--text);
  text-shadow: 6px 6px var(--shadow),
               3px 3px var(--shadow);
}
网站建设之使用CSS文字阴影创建有趣的效果

这已经到达了某个地方,但是我们需要添加一些阴影使其看起来更好。我们添加的步骤越多,最终结果将越详细。在此示例中,我们将从6px 6px开始,并以0.25px的增量逐渐减小,直到达到0。

.playful {
  color: var(--text);
  text-shadow: 
    6px 6px        var(--shadow), 
    5.75px 5.75px  var(--shadow), 
    5.5px 5.5px    var(--shadow), 
    5.25px 5.25px  var(--shadow),
    5px 5px        var(--shadow), 
    4.75px 4.75px  var(--shadow), 
    4.5px 4.5px    var(--shadow), 
    4.25px 4.25px  var(--shadow),
    4px 4px        var(--shadow),
    3.75px 3.75px  var(--shadow),
    3.5px 3.5px    var(--shadow),
    3.25px 3.25px  var(--shadow),
    3px 3px        var(--shadow),
    2.75px 2.75px  var(--shadow),
    2.5px 2.5px    var(--shadow),
    2.25px 2.25px  var(--shadow),
    2px 2px        var(--shadow),
    1.75px 1.75px  var(--shadow),
    1.5px 1.5px    var(--shadow),
    1.25px 1.25px  var(--shadow),
    1px 1px        var(--shadow),
    0.75px 0.75px  var(--shadow),
    0.5px 0.5px    var(--shadow),
    0.25px 0.25px  var(--shadow);
}

网站建设之使用CSS文字阴影创建有趣的效果

使用Sass简化代码

结果可能看起来不错,但是现在的代码很难阅读和编辑。如果要使阴影变大,则必须进行大量复制和粘贴才能实现。例如,将阴影大小增加到10px将意味着手动添加16个阴影。

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

@function textShadow($precision, $size, $color){
  $value: null; 
  $offset: 0;
  $length: $size * (1 / $precision) - 1;@for $i from 0 through $length {
    $offset: $offset + $precision;
    $shadow: $offset + px $offset + px $color;
    $value: append($value, $shadow, comma);
  }@return $value;
}.playful {
  color: #5362F6;
  text-shadow: textShadow(0.25, 6, #E485F8);
}

该函数textShadow采用三个不同的参数:阴影的精度,大小和颜色。然后,它创建一个循环,使偏移量增加$precision(在这种情况下为0.25px),直到达到阴影的总大小(在这种情况下为6px)为止。

网站建设之使用CSS文字阴影创建有趣的效果

这样,我们可以轻松增加阴影的大小或精度。例如,要创建一个10px大且增加0.1px的阴影,我们只需在代码中进行更改即可:

text-shadow: textShadow(0.1, 10, #E485F8);

交替颜色

我们想通过选择其他颜色来使事情变得有趣。我们将文本分成多个字母,并用span包裹起来(可以手动完成,也可以使用ReactJavaScript自动化)。输出将如下所示:

<p class="playful" aria-label="Wash your hands!">
  <span aria-hidden="true">W</span><span aria-hidden="true">a</span><span aria-hidden="true">s</span><span aria-hidden="true">h</span> ...
</p>

然后,我们可以:nth-child()在跨度上使用选择器来更改其文本和阴影的颜色。

.playful span:nth-child(2n) {
  color: #ED625C;
  text-shadow: textShadow(0.25, 6, #F2A063);
}

网站建设之使用CSS文字阴影创建有趣的效果

如果我们在原始CSS中完成此操作,那么最终结果是:

.playful span {
  color: var(--text);
  text-shadow: 
    6px 6px var(--shadow),
    5.75px 5.75px var(--shadow),
    5.5px 5.5px var(--shadow),
    5.25px 5.25px var(--shadow),
    5px 5px var(--shadow),
    4.75px 4.75px var(--shadow),
    4.5px 4.5px var(--shadow),
    4.25px 4.25px var(--shadow),
    4px 4px var(--shadow),
    3.75px 3.75px var(--shadow),
    3.5px 3.5px var(--shadow),
    3.25px 3.25px var(--shadow),
    3px 3px var(--shadow),
    2.75px 2.75px var(--shadow),
    2.5px 2.5px var(--shadow),
    2.25px 2.25px var(--shadow),
    2px 2px var(--shadow),
    1.75px 1.75px var(--shadow),
    1.5px 1.5px var(--shadow),
    1.25px 1.25px var(--shadow),
    1px 1px var(--shadow),
    0.75px 0.75px var(--shadow),
    0.5px 0.5px var(--shadow),
    0.25px 0.25px var(--shadow);
}.playful span:nth-child(2n) {
  --text: #ED625C;
  --shadow: #F2A063;
}

我们可以使用其他颜色和索引重复相同的几次,直到获得我们喜欢的图案:

奖励积分:添加动画

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

.playful span {
  color: #5362F6;
  text-shadow: textShadow(0.25, 6, #E485F8);
  position: relative;
  animation: scatter 1.75s infinite;
}

我们可以通过使用prefers-reduced-motion媒体查询来进一步优化它。这样,不想动画的人就不会得到它。

.playful span {
  color: #5362F6;
  text-shadow: textShadow(0.25, 6, #E485F8);
  position: relative;
  animation: scatter 1.75s infinite;
}

@media screen and (prefers-reduced-motion: reduce) {
  animation: none;
}

然后,nth-child(n)我们将在每个动画中添加不同的动画延迟。

.playful span:nth-child(2n) {
  color: #ED625C;
  text-shadow: textShadow(0.25, 6, #F2A063);
  animation-delay: 0.3s;
}

原创文章,作者:网站建设,如若转载,请注明出处:https://www.davidwu.net/archives/20734

WordPress安全防护插件
服务项目 服务内容 收费标准(元)
主题/插件汉化 汉化团队WordPress主题/插件,翻译率95% (以标的主题/插件的句子数量为准)
服务器环境配置 基于您现有服务器,搭建配置网站运行环境,结合我们多年来实战经验,可完美支持WordPress等PHP程序运行,并配置伪静态规则、优化目录权限等问题。服务器我们强烈推荐使用Linux系统。 100元/次
网站托管 若贵站目前尚无技术人员,无法完成服务器环境配置,可选择我们的网站托管服务,直接交付正常运行的WordPress站点,并且无需担心服务器的后续维护工作,一切都由我们来帮您完成。 标配套餐:1000元/年/站点 高配套餐:联系客服获取
网站加速优化 从服务器后端配置优化到WordPress数据库缓存、前端页面缓存、JS和CSS压缩合并,全方位优化网站加载速度,实现秒开。(此服务仅针对(云)服务器/VPS) 500元/次(仅站内优化200元/次)
主题配置 本站所有主题均支持,可快速实现,若有任何问题可以咨询客服解决,若您希望我们提供配置服务,可选购此服务。 英文主题安装 60元/次 汉化主题安装 30元/次
HTTPS配置 HTTPS已经不断普及,并且有着更高的安全性以及SEO上的优待。该服务收取的为服务费,SSL证书产生的费用请自行承担。 100元/次
网站搬家 迁移网站所有文件和数据库信息、网站相关配置的调整、以及迁移中的疑难问题故障排除。 标准收费:500元/次 若网站数据量大,需协商
网站运维 提供整站的运维服务,保证网站正常运行。包含:网站故障定位及排除、网站数据备份和恢复、网站攻击及木马等问题的处理等 标准收费:2000元/年 IP 5000以上需协商

发表评论

电子邮件地址不会被公开。 必填项已用*标注

51建站客服微信二维码
点击这里购买