「这是我参与11月更文挑战的第1天，活动详情查看：[2021最后一次更文挑战](https://juejin.cn/post/7023643374569816095 "https://juejin.cn/post/7023643374569816095")」 ### 前言 `CSS`是一门很特殊的语言，你认为`CSS`只能用来控制网页的结构与样式，但只要你有丰富的想象力，就能创造无限可能。本文中大师兄为你精选了5个使用纯`CSS`实现的文字炫酷效果，欣赏完之后一定要自己实现体验一番哦~ ### 一.渐变文字效果 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/30af04481d2e4768b2f0405adca34dab~tplv-k3u1fbpfcp-zoom-1.image) 该效果主要利用`background-clip:text`配合`color`实现渐变文字效果首先了解`background-clip: text;`的意思：以盒子内的文字作为裁剪区域向外裁剪，文字之外的区域都将被裁剪掉。 1. 给文本容器设置渐变背景 ```css background: linear-gradient(90deg, black 0%, white 50%, black 100%); ``` 2. 设置`webkit-background-clip`属性，以文字作为裁剪区域向外裁剪 ```css -webkit-background-clip: text; background-clip: text; ``` 3. 通过`-webkit-animation`属性设置动画,即可实现上述效果 ```css -webkit-animation: shining 3s linear infinite; animation: shining 3s linear infinite; ``` ```css @-webkit-keyframes shining { from { background-position: -500%; } to { background-position: 500%; } } @keyframes shining { from { background-position: -500%; } to { background-position: 500%; } } ``` 4. 样式引用 ```html

前端实验室

``` ### 二.彩虹文字效果（跑马灯） ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/48d6a2f3fe4d4a02a7bca3f229607824~tplv-k3u1fbpfcp-zoom-1.image) ```css .text { letter-spacing: 0.2rem; font-size: 1.5rem; background-image: -webkit-linear-gradient(left, #147B96, #E6D205 25%, #147B96 50%, #E6D205 75%, #147B96); -webkit-text-fill-color: transparent; -webkit-background-clip: text; -webkit-background-size: 200% 100%; } ``` 该效果也是利用`background-clip:text`和线性渐变属性`linear-gradient`实现，通过设置区域颜色值实现了彩虹文字的效果。动态彩虹文字需要设置`-webkit-animation`属性 ```css -webkit-animation: maskedAnimation 4s infinite linear; @keyframes maskedAnimation { 0% { background-position: 0 0; } 100% { background-position: -100% 0; } } ``` CSS样式 ```css .rainbow { letter-spacing: 0.2rem; font-size: 1.2rem; text-transform: uppercase; } .rainbow span { animation: rainbow 50s alternate infinite forwards; } @keyframes rainbow { 0% { color: #efc68f; } ... 100% { color: #8fefed; } } ``` ```html

【前端实验室】分享前端最新、最实用前端技术

``` ### 三.发光文字效果 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/feee8d7c92c449adb55cebe26a126b19~tplv-k3u1fbpfcp-zoom-1.image) 该效果主要利用`text-shadow`属性实现。`text-shadow`属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表，每个阴影有两个或三个长度值和一个可选的颜色值进行规定。 ```css .neon { color: #cce7f8; font-size: 2.5rem; -webkit-animation: shining 0.5s alternate infinite; animation: shining 0.5s alternate infinite; } ``` ```css @-webkit-keyframes shining { from { text-shadow: 0 0 10px lightblue, 0 0 20px lightblue, 0 0 30px lightblue, 0 0 40px skyblue, 0 0 50px skyblue, 0 0 60px skyblue; } to { text-shadow: 0 0 5px lightblue, 0 0 10px lightblue, 0 0 15px lightblue, 0 0 20px skyblue, 0 0 25px skyblue, 0 0 30px skyblue; } } ``` ```html

【前端实验室】分享前端最新、最实用前端技术

``` ### 四.打字机效果 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3aa628afc50e4d6bbbfe11f6e2f9cedf~tplv-k3u1fbpfcp-zoom-1.image) 该效果主要是通过改变容器的宽度实现的。 ```css .typing { color: white; font-size: 2em; width: 21em; height: 1.5em; border-right: 1px solid transparent; animation: typing 2s steps(42, end), blink-caret .75s step-end infinite; font-family: Consolas, Monaco; word-break: break-all; overflow: hidden; } ``` ```css /* 打印效果 */ @keyframes typing { from { width: 0; } to { width: 21em; } } /* 光标 */ @keyframes blink-caret { from, to { border-color: transparent; } 50% { border-color: currentColor; } } ``` ```html

【前端实验室】分享前端最新、最实用前端技术

``` `white-space:nowrap`属性主要是为了保证一行显示，这里考虑到英文字母的显示，去除了该属性，保证不会出现字符间断的情况。 `word-break:break-all`使英文字符可以一个一个的呈现出来。 `animation`属性中的`steps`功能符可以让动画断断续续的执行，而非连续执行。 `steps()`语法表示:`steps(number, position)`，其中`number`关键字表示将动画分为多少段；`position`关键字表示动画是从时间段的开头连续还是末尾连续，支持`start`和`end`俩个关键字，含义分别如下： - `start`:表示直接开始 - `end`:表示戛然而止，为默认值光标效果是通过`box-shadow`模拟实现的。通过上述的这几个属性就可以实现一个简易的打字机效果了~ ### 五.故障风格文字效果 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2ed6e52786c9431b88e37feb27d25238~tplv-k3u1fbpfcp-zoom-1.image) 该动画效果比较复杂，主要用到了`CSS伪元素`、`元素自定义属性`、`蒙版属性`、`animation动画`等等。 ```

欢迎关注微信公众号【前端实验室】

``` 这里主要使用了自定义属性，`data-`加上自定义的属性名，赋值要显示的文字供伪元素获取到对应的文字。 ``` @keyframes animation-before{ 0% { clip-path: inset(0 0 0 0); } ... 100% { clip-path: inset(.62em 0 .29em 0); } } @keyframes animation-after{ 0% { clip-path: inset(0 0 0 0); } ... 100% { clip-path: inset(.29em 0 .62em 0); } } ``` 这里设置了两个`keyframes`，分别为 `animation-before` 、`animation-after`，前者是准备给伪元素 before 使用的，后者是给伪元素 after 使用的。其中`clip-path`属性是`CSS3`的新属性`蒙版`，其中的`inset()`值表示的是蒙版形状为矩形,定义蒙版的作用区域后通过`@keyframes`来设置`逐帧动画`，使蒙版的作用区域在垂直方向一直变化，实现上下抖动的效果。 ```css .text{ display: inline-block; font-size: 3.5em; font-weight: 600; padding: 0 4px; color: white; position: relative; } ``` ```css .text::before{ content: attr(data-text); position: absolute; left: -2px; width: 100%; background: black; text-shadow:2px 0 red; animation: animation-before 3s infinite linear alternate-reverse; } ``` ```css .text::after{ content: attr(data-text); position: absolute; left: 2px; width: 100%; background: black; text-shadow: -2px 0 blue; animation: animation-after 3s infinite linear alternate-reverse; } ``` 最后我们设置两个伪元素`before`和`after`，分别定位到跟父元素同样的位置，然后分别向左、右侧移一点点的距离，制作一个错位的效果，然后都将背景色设置为与父元素背景色一样的颜色，用于遮挡父元素这样就可以实现了一个完美的故障风格的文字展示动画了~ 炫酷的特效可以为我们的网页增添不一样的风采，本文中实现的效果源代码大师兄已经上传到Github，公众号后台回复`aaa文字特效`即可获取，快来跟我们一起学习吧！ > > 进了前端门，便是一家人 > > 原创不易,点赞、留言、分享就是大师兄写下去的动力! >