```
svg定义形状元素，rect()方法创建矩形
``` ``` 调用button字体的样式```

``` ```HTML

Button

``` - 1.0.9 [边框绘制2](https://www.ocdeer.cn/ocdeer/btn9/index.html) btn-9
边框样式，使用``````标签，边框样式使用``````定义
引用``````
``` button ``` ```HTML button ``` - 1.1.0 [波动按钮](https://www.ocdeer.cn/ocdeer/btn10/index.html) btn-10
鼠标悬停按钮产生波动效果。单一类选择器，直接引用class="btn-10" ```HTML ``` - 1.1.1 [故障风格](https://www.ocdeer.cn/ocdeer/btn11/index.html) btn-10
故障风按钮，引用第三方库，加载可能会比较慢单一类选择器，直接引用class="btn-11" ```HTML Document

Button

``` - 1.1.2 [绘制边框-流光](https://www.ocdeer.cn/ocdeer/btn12/index.html) btn-12
``````定义边框样式
引用``````
``` night ``` ```HTML night ``` 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标签） ``````标签添加链接 ```html

Welcome

馒头拿来摸摸

``` - 2.4 [炫光文字](http://www.ocdeer.cn/ocdeer/ocdeer/text4.html) text-4
首先引用样式：class="text-4" 使用``````标签规定样式，标签内为悬停炫光样式，不被包裹的则为原有样式 ```html

Welcome

``` 3. input类 - 3.1 [输入框-绘制](https://www.ocdeer.cn/ocdeer/input/input1.html) input-1
首先引用样式：```

``` 分别引用边框的上下左右四个边框的对应样式 ``` ``` ```html

``` - 3.2 [搜索框](https://www.ocdeer.cn/ocdeer/input/input2.html) input-2
首先引用样式：```

``` 引用input样式`````` 使用``````标签绘制悬停时高亮圆圈`````` 该样式的图标为矢量图```

```,矢量图可从阿里巴巴矢量库下载 ```html

``` - 3.3 [搜索框-点击扩展](https://www.ocdeer.cn/ocdeer/input/input3.html) input-3
创建一个盒子：```

``` 创建form表单``` ``` > 不引用JQuery的方法 ```html 可展开搜索框

``` #### 交流群 ![QQ群聊](https://images.gitee.com/uploads/images/2021/0708/143527_b7f3ae16_8014651.jpeg "qrcode_1625725655296.jpg")