• 欢迎访问搞代码网站,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站!
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏搞代码吧

Effeckt.css项目:CSS交互动画应用集锦

前端 程序员 7年前 (2018-06-21) 187次浏览 已收录 0个评论

  目前,网上有大量基于css转换的实验和示例,但它们都过于分散,而Effeckt.css的目标就是把所有基于CSS/jquery动画的应用集中起来,例如:弹窗、按钮、导航、列表、页面切换等等。

  Effeckt.css是一个集合了众多新鲜而又实用的CSS/jQuery动画效果应用,既适用于网站也适用于手机web开发,例如:弹窗、按钮、导航、列表、页面切换等等,这些特效动画都能给你的网站提升一定用户体验,而且简单实用。

  Demo页:http://h5bp.github.io/Effeckt.css/dist/

  项目初衷

  为移动Web网站开发和设计UI并不是件容易的事情,尤其是在60fps下传输和执行。最理想的做法就是基于手机/平板电脑的CSS过渡和关键帧动画来进行jank-free转换,特别是利用硬件和透明度的变化来加速转换。

Effeckt.css项目:CSS交互动画应用集锦

  目前,网上有大量基于CSS转换的实验和示例,但它们都过于分散,而Effeckt.css的目标就是把所有基于CSS/jQuery动画的应用集中起来。

  具体应用:

  • tympanus.net/Development/ModalWindowEffects/
  • tympanus.net/Development/PageTransitions/
  • tympanus.net/Development/PFold/index2.html
  • leaverou.github.io/animatable/
  • lab.hakim.se/ladda/
  • lab.hakim.se/kontext/
  • lab.hakim.se/avgrund/
  • lab.hakim.se/meny/

  项目目标

  • UI较少,只专注于转换/动画;
  • 具有优雅、合理的动态效果;
  • 创建浏览器支持指南;
  • CSS性能回归测试;
  • 针对目标浏览器/设备提供jank-free 60fps;
  • 如果某个功能不能达到性能目标,可以排除这个功能;
  • 有如何避免影响到其它样式元素指南(避免expensive CSS)
  • 提供一个builder,用户可以根据他们的需要来推送CSS
  • 移动设备上是没有悬浮效果的,所以任何基于悬浮特效的都将被排除在外或者是有一个点击的动作特效。

  关于Effeckt.css的更多详情,可以访问:https://github.com/h5bp/Effeckt.css

  问题咨询与反馈:http://github.com/h5bp/Effeckt.css/issues

  国内镜像地址:https://code.csdn.net/OS_Mirror/Effeckt.css

欢迎大家阅读《Effeckt.css项目:CSS交互动画应用集锦》,跪求各位点评,若觉得好的话请收藏本文,by 搞代码


搞代码网(gaodaima.com)提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected],我们会在看到邮件的第一时间内为您处理,或直接联系QQ:872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:Effeckt.css项目:CSS交互动画应用集锦

喜欢 (0)
[搞代码]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址