```
调用样式
```html
This Button1
This Button2
```
```HTML
```
2. text类
- 2.1 [收缩扩展](http://www.ocdeer.cn/ocdeer/ocdeer/text1.html) text-1
引用样式class="btn-1"
该样式默认状态下缩进状态，鼠标悬停时触发扩展效果，显示全文。
默认状态样式直接规定标签选择器，所以我们直接使用span标签即为默认样式，```W```
```html
W
e
l
c
o
m
e
O
m
n
i
p
o
t
e
n
t
C
o
l
o
r
D
e
e
r
```
- 2.2 [聚光灯](http://www.ocdeer.cn/ocdeer/ocdeer/text2.html) text-2
引用class="text-2"
但在实际应用同场景中使用较为麻烦，需要调节文字内容和大小，聚光点的大小等。
该样式的设计思路并非灯光照耀在文字上显现彩色光芒，而是提前规定好文字（这里是指背景绘制区域，为了方便大家理解称暂称文字）的色彩样式并设置镂空效果，然后生成一个圆形可视区域在文字上来回滚动播放，圆形可视区域所在的地方文字不透明，显示为我们规定好的文字色彩样式。而非圆形可视区域的文字表现为透明。
修改文字内容：content: 'ocdeer';
修改文字大小：font-size: 8rem;
修改文字默认状态下颜色：.text-2{color: #FFFFFF;}
开发思路：
首先设置文字颜色透明：color: transparent;
绘制背景区域：background-image: linear-gradient(to right,#c23616,#192a56,#00d2d3,yellow,#6d214f,#2e86de,#4cd137,#e84118);
当值为text 的时候，代表设置了文字的镂空效果：background-clip: text;
创建元素的可显示区域，circle表示创建了圆形，100px表示圆形的直径,0%和50%表示圆形的圆心，圆形的直径和圆形的圆心利用at关键字隔开：clip-path: circle(100px at 0% 50%);
infinite 无限次播放：animation: move 5s infinite;
```html
ocdeer
```
- 2.3 [文字分裂](http://www.ocdeer.cn/ocdeer/ocdeer/text3.html) text-3
首先引用样式：class="text-3"
引用text-3下的a类型class="a"（这里是类选择器a，不是a标签）
```