目前,网上有大量基于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. POJ——3984

    走迷宫问题,POJ上面的题 #include <stdio.h> #include <stdlib.h> #define SIZE 5 bool findpath = fals ...

  2. [转]命令行 Subversion 入门

    http://omyyal.iteye.com/blog/1762831 命令行 Subversion 入门 如果您参与的项目正在使用 Subversion 进行版本控制,您将需要使用 Subvers ...

  3. 如何在windows下安装python第三方包

    python安装第三方库一般方式和easy_install方式 2010-06-24 17:43:53|  分类: Python |  标签:python  |字号 订阅     python安装第三 ...

  4. 菜鸟学习Spring——60s让你学会动态代理原理

    一.为什么要使用动态代理         当一个对象或多个对象实现了N中方法的时候,由于业务需求需要把这个对象和多个对象的N个方法加入一个共同的方法,比如把所有对象的所有方法加入事务这个时候有三种方法 ...

  5. kettle过滤、生成随机数、改变开始复制数量

    下面是一个用Kettle实现数据过滤.生成随机数.改变开始复制数量的连贯示意图. 首先,我们将控件一一建立,通过hop建立连接 下面对每一个控件进行设置 1.生成随机数控件(随机取一个数字与字符串) ...

  6. Maven:mirror和repository 区别

    1 Repository(仓库) 1.1 Maven仓库主要有2种: remote repository:相当于公共的仓库,大家都能访问到,一般可以用URL的形式访问 local repository ...

  7. 023使用typeof关键字获取类内部结构

    private void button1_Click(object sender, EventArgs e) { Focus(); string a=txtType.Text; // Type typ ...

  8. hdu 1023 Train Problem II

    题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=1212 Train Problem II Description As we all know the ...

  9. PHP中使用CURL实现GET和POST请求

    转自:http://www.smsyun.com/home-index-page-id-284.html 一.什么是CURL? cURL 是一个利用URL语法规定来传输文件和数据的工具,支持很多协议, ...

  10. php读取xml文件内容,并循环写入mysql数据库

    <?php $dbconn = mysql_connect("localhost","root","root"); $db = mys ...