目前，网上有大量基于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. lua进阶（一）

    第一章 概览     1.chunks              chunks是一系列语句, lua执行的每一块语句,比如一个文件或者交互模式下的每一行都是一个chunks.      2.全局变量 ...

  2. C# 调用系统API 内核 简单样例

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.R ...

  3. Python学习教程(learning Python)--1.3 Python数据输入

    多数应用程序都有数据输入语句,用于读入数据,和用户进行交互,在Python语言里,可以通过raw_input函数实现数据的从键盘读入数据操作. 基本语法结构:raw_input(prompt) 通常p ...

  4. MTK机子修复分区信息

    这是前一个星期的事了,最近一直懒得写博客~ 此事是由于我误刷了内核,然后导致分区信息出错... 内置存储挂载不上,也找不到内置存储的分区! 如果不是star的帮助.估计俺的爪机就要返厂了!! 接下来说 ...

  5. 信号驱动的IO

    (1)client1,基于SIGIO的写法: #include <sys/types.h> #include <sys/stat.h> #include <fcntl.h ...

  6. oracle自定义job名字，job调度

    一.调试创建 begin -- create_schedule dbms_scheduler.create_schedule(schedule_name => 's_change_send_da ...

  7. windows phone 豆瓣api的封装

    利用周末的时候,重新封装一下豆瓣的api,就当是练手吧!其实现在网上好用的api很多,在这个demo里面基本上已经将整体框架搭建起来,本来想继续完善下去的.但是其实accesstoken的时候,一直拿 ...

  8. 记录bigdesk中ElasticSearch的性能参数

    定时采集bigdesk中的Elasticsearch性能参数,并保存到数据库或ELK,以便于进行长期监控. 基于python脚本实现,脚本如下: #coding=gbk import httplibi ...

  9. linux清除swap

    执行top会显示Cpu(s):  0.7%us,  0.3%sy,  0.0%ni, 99.0%id,  0.0%wa,  0.0%hi,  0.0%si,  0.0%stMem:   2044500 ...

  10. flask环境配置

    1.首先要看装python环境,最好是python 2.7版本的: 2.安装easy_install,至今也不确定这个东西是怎么装的,我先下载了一个ez_setup,用命令“python ez_set ...