CSS3为设计人员提供了许多新的属性和模块(如CSS动画而且CSS转换模块),使他们能够在工作中添加迷人的交互性。如果你想利用这些现代CSS功能,一个快速的方法是使用(或学习)CSS影响库。让我来谈谈一些开源的CSS集合,它们将帮助你更好地制作过渡接口.
1.Animate.css
css是超过60个CSS效果作者是Dropbox的设计师丹尼尔·伊登。Daniel Eden在animation . CSS上的工作启发了下面其他一些CSS效果库。
2.Hover.css
这是一个巨大的收藏48个CSS3悬停效果前端开发人员Ian Lunn。css最酷的地方在于它有一个SASS版本,这对我们很多人来说非常非常方便。
3.fancyInput
fancyInput专门处理与HTML相关的交互<输入>
而且textarea > <
元素。它使您能够在用户输入表单字段时实现有趣的CSS效果。
4.魔法
(注意:magic是一个有趣的CSS3效果的集合。这个神奇的项目的灵感来自于Daniel Eden在animation .css上的工作,是由一个意大利开发人员,他的名字是miniMAC。有了魔法,你可以轻松地触发CSS动画和过渡使用jQuery(或您首选的JavaScript前端web开发框架),只需在目标HTML对象上设置事件侦听器,然后在事件发生时添加/删除特定于魔法的CSS动画类。
例如,我们有一个按钮叫做#提交按钮
我们想把它从DOM中移除——DOM是一种用于关键交互的设计模式,你不希望用户一直点击一个只按一次的按钮——但我们想以一种令人印象深刻的过渡方式来做到这一点,以确保用户不会感到困惑,不知道按钮去了哪里,我们所需要做的就是(使用jQuery):
$(" #提交按钮”).click((){$()函数。addClass('magictime vanishOut')});
5.Effeckt.css
CSS -仍在开发中-是一个移动优先的动画和过渡CSS效果库。其中的效果是由设计师贡献和策划的,以确保它们是有品位的。css非常强调性能,其中一个标准是如果它不能在移动设备上以60fps的速度运行,它就会被淘汰。
读了css的9个目标看这个项目的22秒YouTube上的视频来一窥effect .css的未来。
这并不是CSS效果库的详尽列表。我确信我错过了一些同样伟大的项目。
如果你知道应该在这个列表上的开源项目,或者如果你正在做一个,请在评论中与我们分享。谢谢!