那些炫酷的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/7185755772205137924

最后

本次整理的10个有关文字特效到这里就结束了，希望可以在你的项目中带来一定的收获，如果你还有什么好的设计交互效果欢迎留言讨论。后期还会继续整理分享其他优质前端交互效果，如果有什么期望整理的效果也欢迎留言哈。

看完本文如果觉得有用，记得点个赞支持，收藏起来说不定哪天就用上啦～

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

参考

纯css实现那些超炫酷的动画效果(代码片段)

前言现如今网页越来越趋近于动画，相信大家平时浏览网页或多或少都能看到一些动画效果，那其实大家看到的动画其实很大一部分都是通过js或者插件实现的，但你知道吗，我们所熟知的css就可以制作炫酷的动... 查看详情

那些你不知道的炫酷导航交互效果(代码片段)

基于上次发布的那些你不知道的炫酷按钮交互效果反馈比较好，后续将继续收集那些炫酷的交互效果，希望可以给你的项目添砖加瓦，更上一层楼。那些你不知道的炫酷交互效果系列：那些你不知道的炫酷按钮交互效果那些你不... 查看详情

unity之shadergraph实现超级炫酷的溶解效果入门级教程(代码片段)

Unity之ShaderGraph实现超级炫酷的溶解效果入门级教程前言一，效果展示二，原理介绍三，实现效果四，使用示例五，完整图示前言若你的工程还没有进行基础配置，请查看我的博文Unity之ShaderGraph入门使用详... 查看详情

css3实现炫酷的文字效果_空心/立体/发光/彩色/浮雕/纹理等文字特效

这篇文章主要整理一些css3实现的一些文字特效，分享给大家，相信您看完会有不少的收货哦！ 一、css3空心文字<style>.hollow{-webkit-text-stroke:1pxblack;-webkit-text-fill-color:transparent;font-size:30px;color:#fff;}</style><divclass= 查看详情

10大炫酷的html5文字动画特效欣赏

...字动画，HTML5和CSS3的强大之处就在于此。本文分享的10款炫酷的HTML5文字动画特效非常不错，一起来看看吧。1、HTML5Canvas粒子效果文字动画特效之前我们分享过很多超酷的文字特效，其中也有利用HT 查看详情

css实现炫酷文本过渡动画(代码片段)

今天分享一个炫酷的文本过渡动画效果，如下面GIF所示，曾经是否有见过这种动画呢，想想是不是感觉挺复杂呢，通常这个过渡效果通过较为复杂的可用WebGl实现，本文通过另一种方式实现，文章尾部有神奇的代码，快来瞧瞧看... 查看详情

21.炫酷的css数字j时钟(代码片段)

效果(源码网盘地址在最后)关注公众号《大迁世界》，查看更多视频教程！源码index.html<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>DigitalClock</title><linkrel="stylesheet"href="style.css"/&g 查看详情

翻翻git之---炫酷的自己定义翻滚viewtagcloudview

转载请注明出处：王亟亟的大牛之路周一好，又到了每周最困的一天。近期都被啮齿类动物搞的累死，废话不多，今天上一个自己定义的ViewGroup实现一个3D球形集合。效果图：效果还不错，能够作为短小文字内容的展示用Howtouse?G... 查看详情

炫酷的字体效果(代码片段)

...t;<html><head><metacharset="utf-8"><title>案例：炫酷的字体效果</title></head><styletype="text/css">.padding:0;margin:0;bodywidth:100vh;height:100vh;display:flex;justify-content:center;align-items:center;background-color:#34495e;divfont-size:5em;fon... 查看详情

使用coordinatorlayout打造各种炫酷的效果(代码片段)

使用CoordinatorLayout打造各种炫酷的效果自定义Behavior——仿知乎，FloatActionButton隐藏与展示NestedScrolling机制深入解析一步步带你读懂CoordinatorLayout源码自定义Behavior-仿新浪微博发现页的实现ViewPager，ScrollView嵌套ViewPager滑动... 查看详情

android自定义view：炫酷的剑气加载效果实现(代码片段)

看到一个非常炫的加载效果，文章中大佬是通过css实现的，今天咱们来用Android的自定义View来实现一下这是理想中的效果这是现实的效果不能说百分百还原吧，只能说精髓开工这个效果仔细看，就是有三个类似月... 查看详情

让文字发出炫酷的光效果

.colorful{/*-webkit-mask-image:linear-gradient(toright,red,orange,yellow,green,cyan,blue,purple);*/background-image:linear-gradient(toright,red,orange,yellow,green,yellow,orange,red,orange,yellow,gree 查看详情

炫酷的css形状（值得收藏）(代码片段)

在今日头条中看到炫酷的CSS形状，就记录一下：1.圆形 #circlewidth:100px;height:100px;background:red;border-radius:50% 2.椭圆形#ovalwidth:200px;height:100px;background:red;border-radius:100px/50px;3.上三角#triangle-up 查看详情

canvas-炫酷的3d星空

1.国际惯例，先上效果(⊙o⊙)…效果图看上去效果并不很炫酷啊，直接戳 这里看效果吧！2代码部分 html： <canvasid="canvas"width="1920"height="1080"></canvas>css：*{margin:0;padding:0;}/*没啥必须的css*/js：（这个博主也是够... 查看详情

让css3中transform属性带你一文实现炫酷的转盘抽奖效果(代码片段)

前端时间有个需求是客户端双端APP内嵌入整个转盘抽奖的web子系统，具体是要在后台能够控制大转盘抽奖的奖项数，和用户免费抽奖的次数，并且免费抽奖使用完，用户可以观看广告进行抽奖或使用积分抽奖。正... 查看详情

那些狂拽炫酷的web网站是怎么搭建的？(代码片段)

看到很多小伙伴都拥有自己的网站，包括学习网站，简历网站呀，好生羡慕，那到底是怎么做的呢？今天西红柿就通过云服务器进行演示。目录个人建站能干嘛呢？1、个人简历2、自我营销3、生活纪实4、... 查看详情

使用css实现炫酷的横屏滚动效果

炫酷的横屏滚动效果css实现DEMO:https://codepen.io/kobako/pen/BxVLLm我们对滚动条都不陌生.平时浏览的网页,进度条通常是垂直方向的,内容从上往下排列.但是不知道你有没有看过一些横屏滚动的网站,这样的网站在一众竖屏网页中鹤立鸡... 查看详情

一个炫酷的头像悬停效果(代码片段)

你知道当一个人的头像从一个圆圈或洞里伸出来时的那种效果吗？本文将使用一种很简洁的方式实现该悬停效果，可以用在你的头像交互上面。看到了吗？我们将制作一个缩放动画，其中头像部分似乎从它所在的圆圈中钻出来了... 查看详情