AnimXYZ 可为网站创建、自定义和组合动画。由 CSS 变量提供支持,无需编写单个关键帧即可实现几乎无限数量的独特动画。节省时间并完全控制元素的移动方式。到时候可以考虑是否引入项目中,满足游戏项目的ui库
优势
- 1、css变量提供支持,允许几乎无限数量的独特动画而无需编写单个关键帧。
- 2、即插即用:支持vue、react、SCSS 和 CSS 构建
- 3、高性能:AnimXYZ有一个小软件包,基本功能是 2.68kb,如果包含方便的实用程序,则是 11.4kb
- 4、更少的代码:强大的 CSS 动画,无需自定义关键帧,可满足各种微妙的动画需求。更少的烦恼 = 更多的乐趣。
- 5、可组合:通过类名进行动画组合
演示案列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@animxyz/core">
<style>
.example-grid {
--grid-columns: 4;
--grid-item-size: 4rem;
display: grid;
grid-template-columns: repeat(var(--grid-columns),var(--grid-item-size));
justify-content: center;
margin: 0 auto
}
.example-grid .circle,.example-grid .item-block,.example-grid .square,.example-grid .triangle {
height: var(--grid-item-size);
width: var(--grid-item-size);
background: red;
}
.item-block .circle,.item-block .square,.item-block .triangle {
height: 100%;
width: 100%
}
.circle,.example-wrap,.square,.triangle {
align-items: center;
display: flex;
justify-content: center
}
</style>
</head>
<body>
<div class="example-grid" xyz="fade small stagger">
<div class="square xyz-out"></div>
<div class="square xyz-out"></div>
<div class="square xyz-out"></div>
<div class="square xyz-out"></div>
<div class="square xyz-out"></div>
<div class="square xyz-out"></div>
<div class="square xyz-out"></div>
<div class="square xyz-out"></div>
</div>
</body>
</html>
配置
具体配置可查看官网:animxyz