layui---页面元素按钮和动画

最新推荐文章于 2023-09-13 10:22:57 发布

Asteroid 325

最新推荐文章于 2023-09-13 10:22:57 发布

阅读量935

点赞数

分类专栏： layui

本文链接：https://blog.csdn.net/weixin_43846020/article/details/107374462

版权

layui 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

https://www.layui.com/doc/element/anim.html
在这里插入图片描述

让一个笑脸图标旋转

要加 layui-anim
layui-anim后面加什么动画

 <i class="layui-icon layui-anim layui-anim-rotate" style="font-size: 30px; color: #1E9FFF;">&#xe60c;</i>

在这里插入图片描述

让一个笑脸图标循环旋转

在这里插入图片描述
那个笑脸会一直旋转

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="layui/css/layui.css" />
		<script src="layui/layui.js"></script>
		<script>
			layui.use(['layer','form'],function(){
				var layer=layui.layer,
				form=layui.form;
			})
		</script>
	</head>
	<body>

		  <i class="layui-icon layui-anim layui-anim-rotate layui-anim-loop" style="font-size: 30px; color: #1E9FFF;">&#xe60c;</i>
	</body>
</html>

动画可以放在图标，图片—

②按钮

https://www.layui.com/doc/element/button.html
在这里插入图片描述

<button type="button" class="layui-btn">一个标准的按钮</button>
<a href="http://www.layui.com" class="layui-btn">一个可跳转的按钮</a>

在这里插入图片描述

想要调整按钮的大小和颜色

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="layui/css/layui.css" />
		<script src="layui/layui.js"></script>
		<script>
			layui.use(['layer','form'],function(){
				var layer=layui.layer,
				form=layui.form;
			})
		</script>
	</head>
	<body>
	<button type="button" class="layui-btn">一个标准的按钮</button>
	<a href="http://www.layui.com" class="layui-btn">一个可跳转的按钮</a>

	<button type="button" class="layui-btn layui-btn-sm layui-btn-danger">一个标准的按钮</button>
	</body>
</html>

在这里插入图片描述

按钮组

在这里插入图片描述

	<div class="layui-btn-group">
	  <button type="button" class="layui-btn">增加</button>
	  <button type="button" class="layui-btn">编辑</button>
	  <button type="button" class="layui-btn">删除</button>
	</div>

在这里插入图片描述

Asteroid 325

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
layui---页面元素按钮和动画

https://www.layui.com/doc/element/anim.html让一个笑脸图标旋转要加 layui-animlayui-anim后面加什么动画 <i class="layui-icon layui-anim layui-anim-rotate" style="font-size: 30px; color: #1E9FFF;">&#xe60c;</i>让一个笑脸图标循环旋转那个笑脸会一直旋转<!DOCTYPE html>
复制链接

扫一扫

专栏目录