头图

那些炫酷的CSS文字效果之诗词《兔》

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

效果一

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

文字从清晰到模糊到彻底看不见,给人一种若隐若现的朦胧美,其核心代码就是在animation动画中设置filterblur,即高斯模糊,当设置的数值过大时,文字会模糊到消失不见。

filter: blur(1.5rem);

效果二

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

这里主要用到了svg的到文本标签text,并结合strokefill属性制作空心文字,最后结合animation动画调整strokefill的数值就实现了上图的效果。

@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混合模式,这里用到了multiplycolor-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...

CSS那些事
汇集各种CSS特效
572 声望
436 粉丝
0 条评论
推荐阅读
从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木148阅读 12.2k评论 10

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy46阅读 5.9k评论 12

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木66阅读 6.1k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.3k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木43阅读 7.3k评论 6

CSS 绘制一只思否猫
欢迎关注我的公众号:前端侦探练习 CSS 有一个比较有趣的方式,就是发挥想象,绘制各式各样的图案,比如来绘制一只思否猫?思否猫,SegmentFault 思否的吉祥物,是一只独一无二、特立独行、热爱自由的(>^ω^&lt...

XboxYan43阅读 2.9k评论 14

封面图
从零搭建 Node.js 企业级 Web 服务器(二):校验
校验就是对输入条件的约束,避免无效的输入引起异常。Web 系统的用户输入主要为编辑与提交各类表单,一方面校验要做在编辑表单字段与提交的时候,另一方面接收表单的接口也要做足校验行为,通过前后端共同控制输...

乌柏木33阅读 6.2k评论 9

572 声望
436 粉丝
宣传栏