教你css设置文字自动换行 css设置阴影效果( 二 )

<div class="playful">我的第一个阴影</div>然后我们可以在span上使用 :th-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;}我们可以用其他颜色和索引重复几次，直到达到自己喜欢的图案。
添加动画使用相同的原理，我们可以通过添加动画来使文本更加生动。首先，我们要增加一个重复的动画，让每一个span都能上下移动。
.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;}效果如下

以上关于本文的内容，仅作参考！温馨提示：如遇健康、疾病相关的问题，请您及时就医或请专业人士给予相关指导!

「四川龙网」www.sichuanlong.com小编还为您精选了以下内容，希望对您有所帮助：