fly63前端网

www.fly63.com

首页文章资源工具教程 栏目
  • 关于我们
  • 网站投稿
  • 赞助一下
搜索

在线工具_工作生活好帮手

打造各种简单、易用、便捷的在线工具,网友无需注册和下载安装即可使用

点击查看

关闭

提交网站

AnimXYZ
分享
复制链接
新浪微博
QQ 好友

扫一扫分享

网站地址:https://animxyz.com/
GitHub:https://github.com/ingram-projects/animxyz
网站描述:一个CSS动画库,用于为你的网站创建自定义CSS动画

AnimXYZ 可帮助您为网站创建、自定义和合成动画。由 css 变量提供支持,允许几乎无限数量的独特动画而无需编写单个关键帧。

节省时间并完全控制元素的移动方式。为 vue、react、SCSS 和 CSS 构建,AnimXYZ 将使您的网站栩栩如生。


例如,你可以通过编写 xyz = "fade big up" 来创建动画,该动画可以使用AnimXYZ淡入淡出,按比例放大和向上移动。 

AnimXYZ还有一个小软件包,基本功能是 2.68kb,如果包含方便的实用程序,则是 11.4kb。


可定制性

AnimXYZ是由CSS变量驱动的,AnimXYZ允许你覆盖任何一个CSS变量来进一步定制/控制动画和几乎无限数量的自定义动画。

你可以通过在你的CSS中选择带有 xyz 属性的元素来编辑一个AnimXYZ CSS变量,并改变一个已定义的AnimXYZ变量的值,就像这样:

.my-class-name {
--xyz-opacity: 0.5;
}

所有AnimXYZ变量的开头都带有xyz前缀,然后通常后面跟随CSS属性名称。


嵌套动画

AnimXYZ支持嵌套动画,这允许我们在我们的动画元素(带有 xyz 属性的元素)中包裹多个元素来制作动画。嵌套动画看起来像这样:

<div class="my-class-name" xyz="fade">
<div class="xyz-in">Hello</div>
<div class="xyz-in">Hello</div>
<div class="xyz-in">Hello</div>
</div>

这将使所有包裹着 .my-name-element 的元素同时淡入。


错位动画

如果我们不想让嵌套动画同时发生,我们很幸运,因为AnimXYZ也支持错位动画,这意味着如果我们有一个嵌套动画,我们可以让每个元素一个接一个地到达/离开。我们可以通过在 xyz 属性中添加 stagger 来实现这一点,这将使动画从左到右错开,我们也可以通过使用 stagger-rev 来反转错开,所以现在它将从右到左错开。


链接: https://fly63.com/nav/3445

more>>
相关栏目
sass
成熟、稳定和强大的CSS扩展语言
官网GitHub
postcss
PostCSS是一个使用JavaScript插件来转换CSS的工具。
官网GitHub
stylus
Stylus是一个高效、动态以及丰富的CSS预处理器
官网GitHub
animate.css
齐全的CSS3动画库
官网GitHub
Metro UI
基于平板界面设计CSS库是一种界面展示技术
官网GitHub
Spectre.css
轻量响应式 CSS 框架
官网GitHub
water.css
只需添加CSS框架即可应用样式,无需定义元素类
官网GitHub
DropCSS
一个用来清理无用 CSS 的小工具
点击进入GitHub
Pattern.css
一个CSS库,使用美丽的图案填充空的背景。
官网GitHub
three-dots
一组CSS加载动画,它由三个点组成,而这些点仅由单个元素组成
官网GitHub
CSSeffectsSnippets
提供了漂亮的CSS动画
官网GitHub
Angrytools
多样定制,实用,支持单个动画代码复制的网站
官网
magic
带多种动画效果的CSS3动画库
官网GitHub
topcoat
一款为简洁高速Web应用提供CSS开发的工具
官网GitHub
Biomatic UI
简单,灵活的CSS框架
官网GitHub
css-animation-101
从零开始介绍 CSS 动画开源电子书
官网GitHub

手机预览