关于前端:那些炫酷的CSS文字效果之诗词兔

人不知; 鬼不觉曾经迈入 2023 年，往年是兔年，想到兔子就会联想到玉兔，中秋，胡萝卜，兔子不吃窝边草，这就越扯越远了，明天的主题是用纯 CSS 来实现各种不错的文字效果，文字则摘录古诗词中无关《兔》相干的诗词，让咱们一边观赏古诗词的同时一边走进 CSS 的世界。

成果一

兔苑词才去不还，兰亭水石空明月。—— 陈陶《将进酒》

文字从清晰到含糊到彻底看不见，给人一种若有若无的朦胧美，其外围代码就是在 animation 动画中设置 filter 的blur，即高斯含糊，当设置的数值过大时，文字会含糊到隐没不见。

filter: blur(1.5rem);

成果二

三五明月满，四五蟾兔缺。—— 佚名《孟冬寒气至》

这里次要用到了 svg 的到文本标签 text，并联合 stroke 和fill属性制作空心文字，最初联合 animation 动画调整 stroke 和fill的数值就实现了上图的成果。

@keyframes textAnimate {
  0% {
    stroke-dasharray: 0 50%;
    stroke-dashoffset:  20%;
    fill:hsl(66, 71%, 61%)
  }
  
  100% {
    stroke-dasharray: 50% 0;
    stroke-dashoffstet: -20%;
    fill: hsla(189, 68%, 75%,0%)
  }
}

成果三

不睹行人迹，但见狐兔兴。—— 范云《渡黄河》

此成果次要是设置 background-clip: text 将背景色利用到文字区域，再通过 animation 动画一直调整 background-position 使其背景动起来。

background: linear-gradient(150deg, rgba(155,93,229,1) 0%, rgba(241,91,181,1) 20%, rgba(254,228,64,1) 40%, rgba(0,187,249,1) 60%, rgba(0,245,212,1) 80%);
background-size: 20% 20%;
background-color: #840b2a;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: gradient 5s linear infinite;

成果四

兔走乌飞不住，人生几度三台。—— 晏殊《清平乐》

这个成果次要是通过设置 text-shadow，再通过animation 动画一直调整每个暗影局部的地位和色彩。

text-shadow:
      4px -4px 0 hsla(0, 100%, 50%, 1), 
      3px -3px 0 hsla(0, 100%, 50%, 1), 
      2px -2px 0 hsla(0, 100%, 50%, 1), 
      1px -1px 0 hsla(0, 100%, 50%, 1),
      -4px 4px 0 hsla(180, 100%, 50%, 1), 
      -3px 3px 0 hsla(180, 100%, 50%, 1), 
      -2px 2px 0 hsla(180, 100%, 50%, 1), 
      -1px 1px 0 hsla(180, 100%, 50%, 1)
    ;

成果五

明月三五前，看看玉兔圆。

此成果和成果三相似，设置 background-clip: text 将背景色利用到文字区域，比拟有特色的是将文字设置了不同的色彩并有歪斜切割的感觉，次要是通过设置 linear-gradient 中的 transparent 通明色实现，外围代码如下：

background: linear-gradient(219deg, 
        var(--color-1) 19%, 
        transparent 19%,transparent 20%, 
        var(--color-2) 20%, var(--color-2)  39%,
        transparent 39%,transparent 40%, 
        var(--color-3) 40%,var(--color-3) 59% ,
        transparent 59%,transparent 60%, 
        var(--color-4) 60%, var(--color-4) 79%,
        transparent 79%, transparent 80%, 
        var(--color-5) 80%);
background-clip: text;

成果六

白兔捣药成，问言与谁餐。—— 李白《古朗月行》

这里的成果不是很显著，当文字过大的时候比拟显著，其实就是和抖音 logo 的成果比拟相似，会有红色和蓝色两个色彩的抖动成果，两个色彩是由两个伪元素的 text-shadow 实现，抖动的成果是通过设置 clip:rect 并设置随机的地位，所以咱们看到的画面中呈现的地位都不是反复的。

&::after{content:attr(data-text);
  position:absolute;
  width: 100%;
  left:50%;
  transform: translateX(-50%);
  text-shadow:-2px 0 red;
  top:20px;
  color:white;
  background:black;
  overflow:hidden;
  clip:rect(0,900px,0,0); 
  animation:noise-anim 2s infinite linear alternate-reverse;
}

@keyframes noise-anim{
  $steps:20;
  @for $i from 0 through $steps{#{percentage($i*(1/$steps))}{clip:rect(random(100)+px,9999px,random(100)+px,0);
    }
  }
}

成果七

兔月半轮明。—— 隋 江总《关山月》

这个没有非凡的成果，就是一个纯动态的文字暗影，然而比个别的文字暗影更具备冲击感，所以也列举进去了，外围就是设置不同地位的不同参数文字暗影，以下只贴出了一部分代码。

text-shadow: 
      1px -1px 0 #767676, 
      -1px 2px 1px #737272, 
      -2px 4px 1px #767474, 
      -3px 6px 1px #787777, 
      -4px 8px 1px #7b7a7a, 
      -5px 10px 1px #7f7d7d, 
      -6px 12px 1px #828181, 
      -7px 14px 1px #868585, 
      ...

为不便大家了解，我批改了不同地位的色彩，看这个图大家就容易了解为什么能够实现了，随着越到前面设置的色彩就越淡，暗影成果就进去了。

成果八

兔饥食山林，兔渴饮川泽。—— 宋 秦观《和裴仲谟放兔行》

这里是将文字变成一缕白烟飞走了，看着还是很有意境的感觉。外围实现逻辑是给每个文字设置平移，旋转，歪斜，放大，透明度，文字暗影，而后从左往右给每个文字设置提早执行动画的工夫。这里认真看能够发现每个文字静止的成果并不是齐全一样，这里是通过奇偶选择器设置了不同的 transform 属性值。

@keyframes smoky {
  60% {text-shadow: 0 0 40px whitesmoke;}
  to {
    transform:
      translate3d(15rem,-8rem,0)
      rotate(-40deg)
      skewX(70deg)
      scale(1.5);
    text-shadow: 0 0 20px whitesmoke;
    opacity: 0;
  }
}

成果九

茕茕白兔，东走西顾。—— 汉 佚名《古艳歌》

这个成果看着和成果三是不是有点相似，外围也是设置 background-clip: text 将背景色利用到文字区域，然而这里的背景动画看着比较复杂，但其实代码比较简单，就是设置了一张 gif 的背景图，这个在理论我的项目中大家能够看其复杂度灵活运用。

成果十

有兔斯首，炮之燔之。—— 先秦 佚名《瓠叶》

这个成果的 gif 图不是很真切，大家能够看在线的成果，这里并没有用到 background-clip: text，而是用到了mix-blend-mode 混合模式，这里用到了 multiply 和color-dodge两个混合模式，图中的红色区域的挪动是通过设置 translate 平移使画面动起来了。

.gradient {background: linear-gradient(45deg, red, gold, lightgreen, gold, red);
    mix-blend-mode: multiply;
}

.spotlight {
    background: 
        radial-gradient(
            circle,
            white,
            transparent 25%
        ) center / 25% 25%,
        radial-gradient(
            circle,
            white,
            black 25%
        ) center / 12.5% 12.5%;
    animation: light 5s linear infinite;
    mix-blend-mode: color-dodge;
}

代码在线成果

https://code.juejin.cn/pen/71…

最初

本次整顿的 10 个无关文字特效到这里就完结了，心愿能够在你的我的项目中带来肯定的播种，如果你还有什么好的设计交互成果欢送留言探讨。前期还会持续整顿分享其余优质前端交互成果，如果有什么冀望整顿的成果也欢送留言哈。

看完本文如果感觉有用，记得点个赞反对，珍藏起来说不定哪天就用上啦～

专一前端开发，分享前端相干技术干货，公众号：南城大前端（ID: nanchengfe）

参考

https://codepen.io/comehope/p…
https://codepen.io/hkmDesigne…
https://codepen.io/lbebber/pe…
https://codepen.io/jackrugile…