css边框流光溢彩,OCDeer.css: css动态样式库，OCDeer提供全应用场景的动效css样式，帮助开发者跳过复杂的调试过程，直接在项目引入样式即可，无须浪费太多的精力在界面设计，以腾出更多...

OCDeer - 让作品遇见全世界

关于OCDeer

OCDeer提供全应用场景的动效css样式，帮助开发者跳过复杂的调试过程，直接在项目引入样式即可，无须浪费太多的精力在界面设计，以腾出更多时间去专注于页面逻辑和服务功能。

功能分类

按库功能分为两类，第一类为定式(OCDeer)，所有样式和动效都设计搭配好并写死固定，适合引入即用。第二类为动式(OneClass)，由zwyboom提供,利用伪类：before和：after在保证原有的样式不改变的情况下增加css动态效果，简而言之我们只规定了动效而未规定样式，组件样式仍由开发者决定，相比第一种更加灵活。

使用说明

1.OCDeer

下载对应css库并引入，对照帮助文档，在HTML中直接使用class引用对应样式。

建议对照wiki使用

2.OneClass

下载oneClass.css并引入，在div中引用对应动效的class。

软件架构

1. OCDeer

1. 按结构划分为样式整合包和css库，按自身需求自行取用

2. button.css 按钮类css库

3. Text.css 文本类css库

4. Input.css 输入搜索框类css库

5. Card.css 卡片类css库

6. Films.css 动画类css库

7. Forms.css 表单类css库

8. Navs.css 导航栏类css库

9. Pagination.css 分页符框类css库

10. Modal.css 输入搜索框类css库

2. OneClass

暂未细分

帮助文档

1.OCDeer

导入css库后,直接在HTML中引用对应的类选择器。

BUTTON

上例为最简单的一种，还有多选择器的样式，例如btn-3 波动按钮。

该样式下有两个分类，up，left，区别于波动起点位置及颜色不同。

首先引用该选择器class="btn-3"

然后引用选择器下的具体样式分类class="up"或class="left"

BUTTON

建议使用者对照详细文档使用该库，地址：

OCDeer详细文档地址：OCDeer.md

WiKi地址：wiki

2.OneClass

OneClass全部为单一类选择器，直接在HTML中引用clss即可。

气泡

.bubble{

width: 60px;

height: 60px;

border-radius: 50%;

background-color: #007AFF;

color: white;

text-align: center;

line-height: 60px;

}

OneClass详细文档地址：OneClass.md

样式展示

1.OCDeer

序号

类选择器名

外部实例

1

btn-1

2

btn-2

3

btn-3

4

btn-4

5

btn-5

6

btn-6

7

btn-7

8

btn-8

9

btn-9

10

btn-10

11

btn-11

12

btn-12

2.Text

序号

类选择器名

外部实例

1

text-1

2

text-2

3

text-3

4

text-4

5

text-5

3.Input

序号

类选择器名

外部实例

1

input-1

2

input-2

3

input-3

2.OneClass