纯CSS实现的文字效果

大家好,我是前端实验室的大师兄!

前言

CSS是一门很特殊的语言，你认为CSS只能用来控制网页的结构与样式，但只要你有丰富的想象力，就能创造无限可能。

本文中大师兄为你精选了10个使用纯CSS实现的文字炫酷效果，欣赏完之后一定要自己实现体验一番哦~

一.渐变文字效果

该效果主要利用background-clip:text配合color实现渐变文字效果。首先了解background-clip: text;的意思：以盒子内的文字作为裁剪区域向外裁剪，文字之外的区域都将被裁剪掉。

1. 给文本容器设置渐变背景

 background: linear-gradient(90deg, black 0%, white 50%, black 100%);

1. 设置webkit-background-clip属性，以文字作为裁剪区域向外裁剪

-webkit-background-clip: text;
        background-clip: text;