样式

Kico Style 的内置样式

动画

优雅的过渡动画,为你的页面添加另一份趣味!

使用 CSS 引用对应的动画,这样会使得你的代码简洁且能更好的扩展特性。

在你的选择器里插入 animation 属性,并添加框架内置的 @keyframes 即可实现!

.test-animation{
    animation: rotate linear 2s infinite; // 动画名称 动画函数曲线 时长
}
类型 名称 行为
淡入淡出 fade-in 一般淡入
淡入淡出 fade-off 一般淡出
淡入淡出 fade-in-top 向上淡入
淡入淡出 fade-in-bottom 向下淡入
淡入淡出 fade-in-left 向左淡入
淡入淡出 fade-in-right 向右淡入
淡入缩放 fade-small-large 从大变小的淡入
淡入缩放 fade-large-small 从小变大的淡入
淡入缩放 fade-larger-small 从更大变小的淡入
淡入缩放 fade-small-larger 从小变更大的淡出
缩放 scale-small-large 从小变大
缩放 scale-large-small 从大变小
平移 up-and-down 上下摆动
平移 left-and-right 左右摆动
旋转 rotate 旋转

淡入淡出动画:

<button class="btn yellow" style="animation: fade-in 1s infinite">一般淡入</button>
<button class="btn yellow" style="animation: fade-off 1s infinite">一般淡出</button>
<button class="btn yellow" style="animation: fade-in-top 1s infinite">向上淡入</button>
<button class="btn yellow" style="animation: fade-in-bottom 1s infinite">向下淡入</button>
<button class="btn yellow" style="animation: fade-in-left 1s infinite">向左淡入</button>
<button class="btn yellow" style="animation: fade-in-right 1s infinite">向右淡入</button>

淡入缩放动画:

<button class="btn yellow" style="animation: fade-small-large 1s infinite">从小到大</button>
<button class="btn yellow" style="animation: fade-large-small 1s infinite">从大到小</button>
<button class="btn yellow" style="animation: fade-larger-small 1s infinite">从更大缩小</button>
<button class="btn yellow" style="animation: fade-small-larger 1s infinite">从正常放大</button>

缩放动画:

<button class="btn yellow" style="animation: scale-small-large 1s infinite"">从小变大</button>
<button class="btn yellow" style="animation: scale-large-small 1s infinite">从大变小</button>

平移动画:

<button class="btn yellow" style="animation: up-and-down alternate 1s infinite">上下运动</button>
<button class="btn yellow" style="animation: left-and-right alternate 1s infinite">左右运动</button>

旋转动画:

<button class="btn yellow" style="animation: rotate 1s infinite">旋转</button>