不知不觉已经进入了2023年。今年是兔年。想到兔子，就会想到玉兔、中秋节、胡萝卜、兔子不吃窝边草。这越来越荒谬了。扯远了，今天的主题是用纯CSS实现各种好看的文字效果。正文是与《兔》相关的古诗节选。让我们一边欣赏古诗，一边走进CSS的世界。于是，图园诗去无还，兰亭水石月空。——陈涛《 将进酒 》文字从清晰到模糊再到完全看不见，给人一种朦胧的美。核心代码是在动画动画中设置滤镜的模糊度，即高斯模糊。当设置值过大时，文字会模糊直至消失。过滤器：模糊（1.5rem）；效二三五月圆，四五缺蟾兔。——匿名这里主要使用svg的text标签文字，并结合stroke和fill属性做空心文字，最后结合动画调整stroke和fill值达到效果上图。@keyframestextAnimate{0%{stroke-dasharray:050%;笔画偏移量：20%；fill:hsl(66,71%,61%)}100%{stroke-dasharray:50%0;-20%；fill:hsla(189,68%,75%,0%)}}效果三：没有行人，只有狐狸和兔子。——范云《 渡黄河 》这个效果主要是设置background-clip:text给文本区域应用背景色，然后通过动画不断调整background-position，让背景移动。背景：线性渐变（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%);背景大小：20%20%;背景颜色：#840b2a;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:gradient5s线性无限；结果，四只兔子飞不来，人生三回。——晏舒《 清平乐 》这个效果主要是通过设置text-shadow，然后通过animation动画不断调整每个阴影部分的位置和颜色。文字阴影：4px-4px0hsla(0,100%,50%,1),3px-3px0hsla(0,100%,50%,1),2px-2px0hsla(0,100%,50%,1),1px-1px0hsla(0,100%,50%,1),-4px4px0hsla(180,100%,50%,1),-3px3px0hsla(180,100%,50%,1),-2px2px0hsla(180,100%,50%,1),-1px1px0hsla(180,100%,50%,1);大意是五明月三五，看玉兔圆。这个效果和效果3类似，设置background-clip:text给文本区域应用背景色。比较有特色的是文字设置了不同的颜色，有一种斜切的感觉，主要是通过在linear-gradient中设置透明透明色实现，核心代码如下：background:linear-gradient(219deg,var(--color-1)19%,透明19%,透明20%,var(--color-2)20%,var(--color-2)39%,透明39%,透明40%,var(--color-3)40%,var(--color-3)59%,透明59%,透明60%,var(--color-4)60%,var(--color-4)79%,透明79%，透明80%，var(--color-5)80%)；背景剪辑：文本；，问和谁一起吃饭。——李白《 古朗月行》这里的效果不是很明显。当文字太大时更明显。其实就是类似抖音logo的效果。会有红色和蓝色两种颜色。它是通过两个伪元素的文本阴影来实现的。抖动效果是通过设置clip:rect并设置一个随机位置来实现的，所以我们在屏幕中看到的位置是不重复的。&::after{内容：属性（数据文本）；位置：绝对；宽度：100%；左：50%；转换：translateX(-50%)；文本阴影：-2px0红色；顶部：20px；白颜色;背景：黑色；溢出：隐藏；剪辑：矩形（0,900px,0,0）；动画：噪声动画2s无限线性交替反转；}@keyframes噪声动画{$steps:20;@for$i从0到$steps{#{percentage($i*(1/$steps))}{clip:rect(random(100)+px,9999px,random(100)+px,0);}}}效果是月亮和半只兔子都亮了。-先生。隋江《关山月》这个没有什么特效，就是一个纯静态的文字阴影，但是比普通的文字阴影更有冲击力，所以也列出来了。核心是在不同的位置设置不同的文字阴影参数。下面只贴出部分代码。文本阴影：1px-1px0#767676，-1px2px1px#737272，-2px4px1px#767474，-3px6px1px#787777，-4px8px1px#7b7a7a，-5px10px1px#7f6px1281，-2,-7px14px1px#868585,...为了您的方便，我修改了不同位置的颜色。看这张图就很容易理解为什么可以实现了。当你走到后面时，颜色会变浅。阴影效果就出来了。结果，八只兔子饿了吃山林，兔子渴了喝江湖。——宋秦观《和裴仲谟放兔行》这里，文字化作一缕白烟飞走了，看起来还是很有意境的。核心实现逻辑是为每条文字设置平移、旋转、倾斜、放大、透明度、文字阴影，然后设置每条文字从左到右的延迟动画时间。这里如果仔细看，可以发现每一个文字移动的效果并不完全一样。这里通过奇偶选择器设置不同的transform属性值。@keyframessmoky{60%{text-shadow:0040pxwhitesmoke;}to{transform:translate3d(15rem,-8rem,0)rotate(-40deg)skewX(70deg)scale(1.5);文本阴影：0020pxwhitesmoke；不透明度：0；}}效果是九只琼琼白兔，四处走动。——韩一鸣《古艳歌》这个效果是不是有点像效果3？核心是设置background-clip:text给文本区域应用背景色，不过这里的背景动画看起来比较复杂，其实代码比较简单，就是设置一个gif背景图片，可以灵活运用在您可以看到实际项目的复杂性。效果就像兔子的头，枪的烧焦。——先秦无名《瓠叶》这个效果的gif，不是很逼真。网上可以看到效果。这里没有使用background-clip:text，而是使用了mix-blend-mode，这里使用了multiply和color-dodge两种混合模式，图中白色区域的移动就是通过设置翻译翻译。.gradient{背景：线性渐变（45deg，红色，金色，浅绿色，金色，红色）;mix-blend-mode:multiply;}.spotlight{background:radial-gradient(circle,white,transparent25%)center/25%25%,radial-gradient(circle,white,black25%)center/12.5%12.5%；动画：光5s线性无限；mix-blend-mode:color-dodge;}codeonlineeffecthttps://code.juejin.cn/pen/71...最后，这次整理的10个相关文字特效就到这里了。希望能给你的项目带来一些收获。如果你有什么好的设计交互效果欢迎留言讨论。后期我们会继续整理分享其他优质的前端交互效果。如果您有什么期待的收尾效果，欢迎留言。看完这篇文章，如果觉得有用记得点赞支持哦。说不定哪天会用到~关注前端开发，分享前端相关技术干货，公众号：南城大学前端（ID：nanchengfe）参考https://codepen.io/comehop??e/p...https://codepen.io/hkmDesigne...https://codepen.io/lbebber/pe...https://codepen.io/jackrugile...
