|
|
<!DOCTYPE html>
|
|
|
<html>
|
|
|
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<title>欢迎页面-L-admin1.0</title>
|
|
|
<meta name="renderer" content="webkit">
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
|
<meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
|
|
|
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
|
|
|
<link rel="stylesheet" href="../css/font.css">
|
|
|
<link rel="stylesheet" type="text/css" href="../lib/layui/css/layui.css">
|
|
|
<link rel="stylesheet" type="text/css" href="../lib/layui/css/global.css">
|
|
|
<style>
|
|
|
.site-doc-icon li{width: 222px;}
|
|
|
.site-doc-icon li .layui-anim{width: 150px; height: 150px; line-height: 150px; margin: 0 auto 10px; text-align: center; background-color: #009688; cursor: pointer; color: #fff; border-radius: 50%;}
|
|
|
</style>
|
|
|
<script src="../js/jquery.min.js"></script>
|
|
|
<script src="../lib/layui/layui.js"></script>
|
|
|
<script type="text/javascript" src="../js/xadmin.js"></script>
|
|
|
<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
|
|
|
<!--[if lt IE 9]>
|
|
|
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
|
|
|
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
|
|
|
<![endif]-->
|
|
|
</head>
|
|
|
|
|
|
<body class="layui-fluid">
|
|
|
<fieldset class="layui-elem-field layui-field-title mar-t30" >
|
|
|
<legend>动画过程演示</legend>
|
|
|
</fieldset>
|
|
|
|
|
|
<ul class="site-doc-icon site-doc-anim">
|
|
|
<li>
|
|
|
<div class="layui-anim" data-anim="layui-anim-up">从最底部往上滑入</div>
|
|
|
<div class="code">layui-anim-up</div>
|
|
|
</li>
|
|
|
<li>
|
|
|
<div class="layui-anim" data-anim="layui-anim-upbit">微微往上滑入</div>
|
|
|
<div class="code">layui-anim-upbit</div>
|
|
|
</li>
|
|
|
<li>
|
|
|
<div class="layui-anim" data-anim="layui-anim-scale">平滑放大</div>
|
|
|
<div class="code">layui-anim-scale</div>
|
|
|
</li>
|
|
|
<li>
|
|
|
<div class="layui-anim" data-anim="layui-anim-scaleSpring">弹簧式放大</div>
|
|
|
<div class="code">layui-anim-scaleSpring</div>
|
|
|
</li>
|
|
|
</ul>
|
|
|
<ul class="site-doc-icon site-doc-anim">
|
|
|
<li>
|
|
|
<div class="layui-anim" data-anim="layui-anim-fadein">渐现</div>
|
|
|
<div class="code">layui-anim-fadein</div>
|
|
|
</li>
|
|
|
<li>
|
|
|
<div class="layui-anim" data-anim="layui-anim-fadeout">渐隐</div>
|
|
|
<div class="code">layui-anim-fadeout</div>
|
|
|
</li>
|
|
|
<li>
|
|
|
<div class="layui-anim" data-anim="layui-anim-rotate">360度旋转</div>
|
|
|
<div class="code">layui-anim-rotate</div>
|
|
|
</li>
|
|
|
<li>
|
|
|
<div class="layui-anim" data-anim="layui-anim-rotate layui-anim-loop">循环动画</div>
|
|
|
<div class="code">追加：layui-anim-loop</div>
|
|
|
</li>
|
|
|
</ul>
|
|
|
|
|
|
|
|
|
<script src="../lib/layui/layui.js"></script>
|
|
|
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
|
|
|
<script>
|
|
|
</script>
|
|
|
</body>
|
|
|
|
|
|
|
|
|
</html> |
