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

让我们看一下如何使用CSS text-shadow属性创建真正的3D文本。您可能会认为文本阴影可以在文本后面应用模糊,渐变的颜色,这是正确的!但是,就像盒子阴影一样,您可以控制阴影的模糊程度,包括将阴影一直降低到完全不模糊。结合使用逗号分隔的阴影并将其堆叠在一起,这就是我们在这里要做的CSS技巧。 到最后,我们将得到如下所示的内容: 厦门网站建设
在文本阴影上快速复习 语法如下: .el { text-shadow: [x-offset] [y-offset] [blur] [color]; } x-offset:在x轴上的位置。正值将阴影向右移动,负值将阴影向左移动。(需要) y-offset:在y轴上的位置。正值将阴影移到底部,负值将阴影移到顶部。(需要) blur:阴影应该有多少模糊。值越高,阴影越柔和。默认值为0px(无模糊)。(可选的) color:阴影的颜色。(需要) 厦门网站建设
第一个阴影 让我们通过仅添加一个阴影开始创建效果。阴影将向右推6px,向底部推6px: :root { –text: #5362F6; /* Blue */ –shadow: #E485F8; /* Pink */ } 
 .playful { color: var(–text); text-shadow: 6px 6px var(–shadow); } 厦门网站建设
创建更多阴影的深度 此时,我们所拥有的只是一个平坦的阴影-还没有太多的3D效果。通过将更多text-shadow实例添加到同一元素,我们可以创建深度并将阴影连接到实际文本。它所要做的就是用逗号分隔它们。让我们从中间添加一个开始: .playful { color: var(–text); text-shadow: 6px 6px var(–shadow), 3px 3px var(–shadow); } 这已经到达了某个地方,但是我们需要添加一些阴影使其看起来更好。我们添加的步骤越多,最终结果将越详细。在此示例中,我们将从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); }
使用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)为止。 这样,我们可以轻松增加阴影的大小或精度。例如,要创建一个10px大且增加0.1px的阴影,我们只需在代码中进行更改即可: text-shadow: textShadow(0.1, 10, #E485F8);
交替颜色 我们想通过选择其他颜色来使事情变得有趣。我们将文本分成多个字母,并用span包裹起来(可以手动完成,也可以使用
React
JavaScript自动化)。输出将如下所示: <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中完成此操作,那么最终结果是: .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; }

友情提示:点赞熊源码网http://www.dianzanxiong.com点赞熊源码网 » 网站建设之使用CSS文字阴影创建有趣的效果
分享到:
赞(0)
广告位820*80