283 lines
14 KiB
HTML
283 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>动画 - Kico Style</title>
|
|
<meta name="theme-color" content="#3498db">
|
|
<link rel="icon" href="static/icon-32.png" sizes="32x32"/>
|
|
<link rel="icon" href="static/icon-192.png" sizes="192x192"/>
|
|
<link href="static/kico.css" rel="stylesheet" type="text/css"/>
|
|
<link href="static/doc.css?v=22.12.25" rel="stylesheet" type="text/css"/>
|
|
<meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1"/>
|
|
</head>
|
|
<body class="has-bar">
|
|
<aside class="sidebar">
|
|
<div class="header">
|
|
<img src="static/kico.svg" title="Kico Style" />
|
|
<span class="title">Style</span>
|
|
</div>
|
|
<nav class="menu">
|
|
<a href="index.html" content="开始">
|
|
<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M893.7 505.9H129.3c-13 0-24.8-7.9-29.8-19.9-5-12-2.2-25.9 7-35.2l307-307c26.1-26.1 60.9-40.5 98-40.5s71.9 14.4 98 40.5l307 307c9.2 9.2 12 23.1 7 35.2-5 12.1-16.7 19.9-29.8 19.9zM673.2 919.9h-31.5c-17.8 0-32.3-14.4-32.3-32.3v-77.4c0-23.1-18.8-42.1-41.9-42.4-22.3 0.3-41.1 19.3-41.1 42.4v77.4c0 17.8-14.4 32.3-32.3 32.3H349.8c-70.9 0-128.7-63.7-128.7-141.9V581.9c0-17.8 14.4-32.3 32.3-32.3h516.2c17.8 0 32.3 14.4 32.3 32.3V778c-0.1 78.3-57.8 141.9-128.7 141.9z"></path>
|
|
</svg>
|
|
</a>
|
|
<a href="wrap.html" content="样式">
|
|
<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M877.3 154.7C836.9 114.3 783 92 725.5 92c-57.5 0-111.4 22.3-151.8 62.7l-48.1 48.1-251.4 251.3 303.6 303.6 299.4-299.4c40.4-40.4 62.7-94.3 62.7-151.8 0-57.4-22.2-111.4-62.6-151.8zM221.5 506.9L177 551.3c-16.8 16.8-27.9 37.9-32.4 61.2l-53.9 285c-2.3 12.1 1.6 24.6 10.3 33.3 7.1 7.1 16.6 10.9 26.4 10.9 2.3 0 4.6-0.2 6.9-0.6l285-53.9c23.3-4.4 44.5-15.6 61.2-32.4l44.4-44.4-303.4-303.5z"></path>
|
|
</svg>
|
|
</a>
|
|
<a href="components.html" content="组件">
|
|
<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M512 510.4m-105.9 0a105.9 105.9 0 1 0 211.8 0 105.9 105.9 0 1 0-211.8 0ZM876 553.6l-8.2-4.8c-20-11.6-22.2-30.7-22.2-38.4 0-7.7 2.2-26.9 22.2-38.4l8.2-4.7c25.3-14.6 43.4-38.1 50.9-66.3 7.6-28.2 3.7-57.6-10.9-82.9l-35.3-61.2c-14.6-25.3-38.1-43.4-66.3-50.9-28.2-7.5-57.6-3.7-82.9 10.9l-8.2 4.7c-20 11.6-37.7 3.9-44.4 0s-22.2-15.3-22.2-38.4v-9.5c0-60.2-49-109.3-109.3-109.3h-70.6c-60.2 0-109.3 49-109.3 109.3v9.5c0 19.6-11.3 30.8-18 35.7-11.6 8.4-30.5 13.6-48.8 2.9l-8.8-5.2c-2.6-1.5-4.8-2.8-7.6-4.1-0.1 0-0.2-0.1-0.2-0.1-51.6-24-112.1-4.9-140.6 44.5L108 318c-14.6 25.3-18.5 54.7-10.9 82.9 7.6 28.2 25.6 51.7 50.9 66.3l8.2 4.8c20 11.6 22.2 30.7 22.2 38.4 0 7.7-2.2 26.9-22.2 38.4l-8.2 4.7c-25.3 14.6-43.4 38.1-50.9 66.3-7.6 28.2-3.7 57.6 10.9 82.9l35.3 61.2c14.6 25.3 38.1 43.4 66.3 50.9 28.2 7.5 57.6 3.7 82.9-10.9l8.2-4.7c20-11.6 37.7-3.9 44.4 0 6.7 3.9 22.2 15.3 22.2 38.4v9.5c0 60.2 49 109.3 109.3 109.3h70.6c60.2 0 109.3-49 109.3-109.3v-9.5c0-23.1 15.5-34.6 22.2-38.4 6.7-3.9 24.3-11.6 44.4 0l8.2 4.8c25.3 14.6 54.7 18.5 82.9 10.9 28.2-7.6 51.7-25.6 66.3-50.9l35.3-61.2c14.6-25.3 18.5-54.7 10.9-82.9-7.4-28.1-25.5-51.7-50.7-66.3zM512 687.8c-97.8 0-177.3-79.5-177.3-177.3S414.2 333.1 512 333.1s177.3 79.5 177.3 177.3S609.8 687.8 512 687.8z"></path>
|
|
</svg>
|
|
</a>
|
|
</nav>
|
|
</aside>
|
|
<aside class="sub-sidebar">
|
|
<ul>
|
|
<li>
|
|
<a href="wrap.html">容器</a>
|
|
<ul>
|
|
<li><a href="wrap.html#resize">全局缩放</a></li>
|
|
<li><a href="wrap.html#wrap-limit">尺寸限制</a></li>
|
|
<li><a href="wrap.html#wrap-padding">保留间距</a></li>
|
|
<li><a href="wrap.html#clearfix">清除浮动</a></li>
|
|
<li><a href="wrap.html#float">设置浮动</a></li>
|
|
<li><a href="wrap.html#align">文字对齐</a></li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<a href="elements.html">常用元素</a>
|
|
<ul>
|
|
<li><a href="elements.html#heading">标题</a></li>
|
|
<li><a href="elements.html#types">文字</a></li>
|
|
<li><a href="elements.html#images">图片</a></li>
|
|
<li><a href="elements.html#article">文章</a></li>
|
|
<li><a href="elements.html#buttons">按钮</a></li>
|
|
<li><a href="elements.html#tag">漂浮提示</a></li>
|
|
<li><a href="elements.html#codes">代码块</a></li>
|
|
<li><a href="elements.html#lists">项目列表</a></li>
|
|
<li><a href="elements.html#forms">表单</a></li>
|
|
<li><a href="elements.html#fieldset">表单小组</a></li>
|
|
<li><a href="elements.html#table">表格</a></li>
|
|
<li><a href="elements.html#media">多媒体</a></li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<a href="grid.html">栅格系统</a>
|
|
<ul>
|
|
<li><a href="grid.html#grids-size">栅格尺寸</a></li>
|
|
<li><a href="grid.html#grids-auto">自动栅格</a></li>
|
|
<li><a href="grid.html#grids-info">栅格类型</a></li>
|
|
<li><a href="grid.html#grids-padding">栅格间距</a></li>
|
|
<li><a href="grid.html#columns-align">对齐方式</a></li>
|
|
<li><a href="grid.html#columns-hide">栅格隐藏</a></li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<a href="animation.html">动画</a>
|
|
<ul>
|
|
<li><a href="animation.html#animate-fade">淡入淡出</a></li>
|
|
<li><a href="animation.html#animate-fade-scale">淡入缩放</a></li>
|
|
<li><a href="animation.html#animate-scale">缩放</a></li>
|
|
<li><a href="animation.html#animate-moving">平移</a></li>
|
|
<li><a href="animation.html#animate-rotate">旋转</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</aside>
|
|
<main class="content">
|
|
<div class="wrap min">
|
|
<div class="ks-title">
|
|
<h1>样式</h1>
|
|
<h2>Kico Style 的内置样式</h2>
|
|
</div>
|
|
<div class="ks-content">
|
|
<h1>动画</h1>
|
|
<p>优雅的过渡动画，为你的页面添加另一份趣味！</p>
|
|
<blockquote>使用 CSS 引用对应的动画，这样会使得你的代码简洁且能更好的扩展特性。</blockquote>
|
|
<p>在你的选择器里插入 <code>animation</code> 属性，并添加框架内置的 <code>@keyframes</code> 即可实现！</p>
|
|
<div class="demo-block animation-demo">
|
|
<button class="btn yellow" style="animation: rotate linear 2s infinite; -webkit-animation: rotate linear 2s infinite">_(:з」∠)_</button>
|
|
</div>
|
|
<details class="code-block">
|
|
<summary>查看代码：</summary>
|
|
<pre class="language-css"><code>.test-animation {
|
|
animation: rotate linear 2s infinite; /* 动画名称 动画函数曲线 时长 */
|
|
}</code></pre>
|
|
</details>
|
|
<div class="ks-table">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>类型</th>
|
|
<th>名称</th>
|
|
<th>行为</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>淡入淡出</td>
|
|
<td>fade-in</td>
|
|
<td>一般淡入</td>
|
|
</tr>
|
|
<tr>
|
|
<td>淡入淡出</td>
|
|
<td>fade-off</td>
|
|
<td>一般淡出</td>
|
|
</tr>
|
|
<tr>
|
|
<td>淡入淡出</td>
|
|
<td>fade-in-top</td>
|
|
<td>向上淡入</td>
|
|
</tr>
|
|
<tr>
|
|
<td>淡入淡出</td>
|
|
<td>fade-in-bottom</td>
|
|
<td>向下淡入</td>
|
|
</tr>
|
|
<tr>
|
|
<td>淡入淡出</td>
|
|
<td>fade-in-left</td>
|
|
<td>向左淡入</td>
|
|
</tr>
|
|
<tr>
|
|
<td>淡入淡出</td>
|
|
<td>fade-in-right</td>
|
|
<td>向右淡入</td>
|
|
</tr>
|
|
<tr>
|
|
<td>淡入缩放</td>
|
|
<td>fade-small-large</td>
|
|
<td>从大变小的淡入</td>
|
|
</tr>
|
|
<tr>
|
|
<td>淡入缩放</td>
|
|
<td>fade-large-small</td>
|
|
<td>从小变大的淡入</td>
|
|
</tr>
|
|
<tr>
|
|
<td>淡入缩放</td>
|
|
<td>fade-larger-small</td>
|
|
<td>从更大变小的淡入</td>
|
|
</tr>
|
|
<tr>
|
|
<td>淡入缩放</td>
|
|
<td>fade-small-larger</td>
|
|
<td>从小变更大的淡出</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>缩放</td>
|
|
<td>scale-small-large</td>
|
|
<td>从小变大</td>
|
|
</tr>
|
|
<tr>
|
|
<td>缩放</td>
|
|
<td>scale-large-small</td>
|
|
<td>从大变小</td>
|
|
</tr>
|
|
<tr>
|
|
<td>平移</td>
|
|
<td>up-and-down</td>
|
|
<td>上下摆动</td>
|
|
</tr>
|
|
<tr>
|
|
<td>平移</td>
|
|
<td>left-and-right</td>
|
|
<td>左右摆动</td>
|
|
</tr>
|
|
<tr>
|
|
<td>旋转</td>
|
|
<td>rotate</td>
|
|
<td>旋转</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<section>
|
|
<h2 id="animate-fade">淡入淡出动画：</h2>
|
|
<div class="demo-block animation-demo">
|
|
<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>
|
|
</div>
|
|
<details class="code-block">
|
|
<summary>查看代码：</summary>
|
|
<pre class="language-html"><code><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></code></pre>
|
|
</details>
|
|
</section>
|
|
<section>
|
|
<h2 id="animate-fade-scale">淡入缩放动画：</h2>
|
|
<div class="demo-block animation-demo">
|
|
<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>
|
|
</div>
|
|
<details class="code-block">
|
|
<summary>查看代码：</summary>
|
|
<pre class="language-html"><code><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></code></pre>
|
|
</details>
|
|
</section>
|
|
<section>
|
|
<h2 id="animate-scale">缩放动画：</h2>
|
|
<div class="demo-block animation-demo">
|
|
<button class="btn yellow" style="animation: scale-small-large 1s infinite">从小变大</button>
|
|
<button class="btn yellow" style="animation: scale-large-small 1s infinite">从大变小</button>
|
|
</div>
|
|
<details class="code-block">
|
|
<summary>查看代码：</summary>
|
|
<pre class="language-html"><code><button class="btn yellow" style="animation: scale-small-large 1s infinite"">从小变大</button>
|
|
<button class="btn yellow" style="animation: scale-large-small 1s infinite">从大变小</button></code></pre>
|
|
</details>
|
|
</section>
|
|
<section>
|
|
<h2 id="animate-moving">平移动画：</h2>
|
|
<div class="demo-block animation-demo">
|
|
<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>
|
|
</div>
|
|
<details class="code-block">
|
|
<summary>查看代码：</summary>
|
|
<pre class="language-html"><code><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></code></pre>
|
|
</details>
|
|
</section>
|
|
<section>
|
|
<h2 id="animate-rotate">旋转动画：</h2>
|
|
<div class="demo-block animation-demo">
|
|
<button class="btn yellow" style="animation: rotate 1s infinite">旋转</button>
|
|
</div>
|
|
<details class="code-block">
|
|
<summary>查看代码：</summary>
|
|
<pre class="language-html"><code><button class="btn yellow" style="animation: rotate 1s infinite">旋转</button></code></pre>
|
|
</details>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<footer>
|
|
<a class="to-top" href="#"></a>
|
|
<p>© 2023 By <a href="https://paugram.com" target="_blank">Dreamer-Paul</a>.</p>
|
|
</footer>
|
|
|
|
<script src="static/kico.js"></script>
|
|
<script src="static/doc.js?v=22.12.25"></script>
|
|
<script src="https://cdn.jsdelivr.net/gh/Dreamer-Paul/Single@2.1/static/prism.js"></script>
|
|
</body>
|
|
</html>
|