5 CSS效果库为你的设计增压器

WebFX总裁。Bill在互联网营销行业有超过25年的经验,专门从事SEO, UX,信息架构,营销自动化等。William在希彭斯堡和麻省理工学院的科学计算和教育背景为MarketingCloudFX和WebFX的其他关键研发项目提供了基础。

CSS3为设计人员提供了许多新的属性和模块(如CSS动画而且CSS转换模块),使他们能够在工作中添加迷人的交互性。如果你想利用这些现代CSS功能,一个快速的方法是使用(或学习)CSS影响库。让我来谈谈一些开源的CSS集合,它们将帮助你更好地制作过渡接口

1.Animate.css

Animate.csscss是超过60个CSS效果作者是Dropbox的设计师丹尼尔·伊登。Daniel Eden在animation . CSS上的工作启发了下面其他一些CSS效果库。

2.Hover.css

Hover.css这是一个巨大的收藏48个CSS3悬停效果前端开发人员Ian Lunn。css最酷的地方在于它有一个SASS版本,这对我们很多人来说非常非常方便。

3.fancyInput

fancyInputfancyInput专门处理与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

Effeckt.cssCSS -仍在开发中-是一个移动优先的动画和过渡CSS效果库。其中的效果是由设计师贡献和策划的,以确保它们是有品位的。css非常强调性能,其中一个标准是如果它不能在移动设备上以60fps的速度运行,它就会被淘汰。

读了css的9个目标看这个项目的22秒YouTube上的视频来一窥effect .css的未来。

这并不是CSS效果库的详尽列表。我确信我错过了一些同样伟大的项目。

如果你知道应该在这个列表上的开源项目,或者如果你正在做一个,请在评论中与我们分享。谢谢!

相关内容

WebFX职业

加入我们的使命,为全球各地的企业提供行业领先的数字营销服务-同时建立您的个人知识和个人成长。

我们招聘! 视图30 +职位空缺!