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

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

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

  项目初衷

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

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

  具体应用:

  项目目标

  • 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交互动画应用集锦的更多相关文章

  1. 简单css实现input提示交互动画效果

    通过基础CSS实现输入提示交互动画效果,并兼容各浏览器! 1.效果展示 2.css代码 h4 { margin: 30px 0; } input { margin:; font-size: 16px; ...

  2. CSS 3学习——animation动画

    以下内容根据官方文档翻译以及自己的理解整理. 1.  介绍 本方案介绍动画(animations).通过动画,开发者可以将CSS属性值的变化指定为一个随时间变化的关键帧(keyframes)的集合.在 ...

  3. 纯css实现苹果表盘动画

    欢迎訪问我们的博客:http://www.w3ctrain.com/2015/07/06/Apple-Watch-Dials/ 随着苹果表的大量生产,我想.用CSS来实现拨号动画的时候到了. 在这篇文 ...

  4. 动态加载js,css(项目中需要的)

    最近做的一个项目需要加入百度统计,大家都知道百度统计在页面引用就是一坨js,实现方法很简单引用到页面就ok了. 那么问题来了,虽然我不知道百度统计的原理是啥,我的测试服引用了百度统计,百度统计账号里面 ...

  5. Android github上开源项目、酷炫的交互动画和视觉效果地址集合

    Android上开源的酷炫的交互动画和视觉效果:http://blog.csdn.net/u013278099/article/details/50323689 Awesome-android-ui: ...

  6. No.3 - CSS transition 和 CSS transform 配合制作动画

    课程概述 作业提交截止时间:09-01 任务目的 深度理解掌握 transition-timing-function 以及它的意义 学会配合使用 CSS transform 和CSS transiti ...

  7. create-react-app创建react项目 css模块化处理

    用的css预处理器用sass,其他大同小异. 用create-react-app创建项目,执行npm run eject弹出配置文件(此操作不可逆): 配置sass,用的最新的CRA,webpack4 ...

  8. CSS Modules 解决 react 项目 css 样式互相影响的问题

    1. CSS Modules引入目的 写过CSS的人,应该都对一大长串选择器选中一个元素不陌生吧,这种方式,其实定义的就是全局样式,我们时常会因为选择器权重问题,没有把我们想要的样式加上去. 另外,每 ...

  9. css吃豆人动画

    一. Css吃豆人动画 1. 上半圆:两个div,内部一个圆div,外部设置宽高截取半圆 外部div动画:animation: 动画样式 1s(时长) ease(动画先低速后快速) infinite( ...

随机推荐

  1. LinkedList存储一副扑克牌,实现洗牌功能。

    package cd.itcast.runble; import java.util.LinkedList; import java.util.Random; /** * LinkedList存储一副 ...

  2. ARM时钟初始化

    2440: S3C2440可以使用外部晶振(XTIpll)(默认为12MHZ)和外部时钟(EXTCLK)两种方式输入时钟信号.它由跳线OM[3:2]决定.S3C2440 默认的工作主频为12MHz(晶 ...

  3. Server Tomcat v7.0 Server at localhost failed to start解决办法

    今晚搞了下tomcat,在调试的时候发现报了这样一个错误Server Tomcat v7.0 Server at localhost failed to start 首先,确认了端口号8080是不是被 ...

  4. Python判断是否是数字(无法判断浮点数)(已解决)

    s为字符串s.isalnum() 所有字符都是数字或者字母s.isalpha() 所有字符都是字母s.isdigit() 所有字符都是数字s.islower() 所有字符都是小写s.isupper() ...

  5. Oracle redo 日志切换时间频率

    DB: 11.2.0.3.0 查看Oracle的redo日志切换频率 两条SQL,原理是一样的,第二个用到了统计函数 时间单位:分钟 方法一. select * from v$log a where ...

  6. asp.net实现手机号码归属地查询,代码如下

    protected void Button1_Click(object sender, EventArgs e)        {            if (Regex.IsMatch(TextB ...

  7. NFC framework

    NFC framework introduce 1 NFC简介 对于NFC,是google在android4.0上推出来的,简单介绍下.近场通讯(NFC)是一系列短距离无线技术,一般需要4cm或者更短 ...

  8. MVC4.0 WebApi如何自定义返回数据类型

    1.客户端可以通过HTTP Accept消息头来通知服务器客户端想要什么样的MIME类型数据,例如:application/json则代表告诉服务器想要的是Json数据 2.服务器端撇开客户端的请求类 ...

  9. Beyond Compare 4

    Beyond Compare是一款不可多得的专业级的文件夹和文件对比工具.使用他可以很方便的对比出两个文件夹或者文件的不同之处.并把相差的每一个字节用颜色加以表示,查看方便.并且支持多种规则对比.

  10. R语言实战读书笔记2—创建数据集(上)

    第二章 创建数据集 2.1 数据集的概念 不同的行业对于数据集的行和列叫法不同.统计学家称它们为观测(observation)和变量(variable) ,数据库分析师则称其为记录(record)和字 ...