Effeckt.css项目:CSS交互动画应用集锦
目前,网上有大量基于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动画的应用集中起来。
具体应用:
- 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交互动画应用集锦的更多相关文章
- 简单css实现input提示交互动画效果
通过基础CSS实现输入提示交互动画效果,并兼容各浏览器! 1.效果展示 2.css代码 h4 { margin: 30px 0; } input { margin:; font-size: 16px; ...
- CSS 3学习——animation动画
以下内容根据官方文档翻译以及自己的理解整理. 1. 介绍 本方案介绍动画(animations).通过动画,开发者可以将CSS属性值的变化指定为一个随时间变化的关键帧(keyframes)的集合.在 ...
- 纯css实现苹果表盘动画
欢迎訪问我们的博客:http://www.w3ctrain.com/2015/07/06/Apple-Watch-Dials/ 随着苹果表的大量生产,我想.用CSS来实现拨号动画的时候到了. 在这篇文 ...
- 动态加载js,css(项目中需要的)
最近做的一个项目需要加入百度统计,大家都知道百度统计在页面引用就是一坨js,实现方法很简单引用到页面就ok了. 那么问题来了,虽然我不知道百度统计的原理是啥,我的测试服引用了百度统计,百度统计账号里面 ...
- Android github上开源项目、酷炫的交互动画和视觉效果地址集合
Android上开源的酷炫的交互动画和视觉效果:http://blog.csdn.net/u013278099/article/details/50323689 Awesome-android-ui: ...
- No.3 - CSS transition 和 CSS transform 配合制作动画
课程概述 作业提交截止时间:09-01 任务目的 深度理解掌握 transition-timing-function 以及它的意义 学会配合使用 CSS transform 和CSS transiti ...
- create-react-app创建react项目 css模块化处理
用的css预处理器用sass,其他大同小异. 用create-react-app创建项目,执行npm run eject弹出配置文件(此操作不可逆): 配置sass,用的最新的CRA,webpack4 ...
- CSS Modules 解决 react 项目 css 样式互相影响的问题
1. CSS Modules引入目的 写过CSS的人,应该都对一大长串选择器选中一个元素不陌生吧,这种方式,其实定义的就是全局样式,我们时常会因为选择器权重问题,没有把我们想要的样式加上去. 另外,每 ...
- css吃豆人动画
一. Css吃豆人动画 1. 上半圆:两个div,内部一个圆div,外部设置宽高截取半圆 外部div动画:animation: 动画样式 1s(时长) ease(动画先低速后快速) infinite( ...
随机推荐
- php框架学习的步骤
一,选择一个合适的php框架 在国内,使用zf,ci和tp框架的人比较多,新手可以从中选一个去学习,新手不建议一开始就去学习zf,功力还不够深,学习zf会让你更迷茫. 二,选定一个php框架之后,如何 ...
- Dll学习三_Dll 相互间以及主程序间的数据共享——测试未通过,应该用内存映射
测试环境:XP,DELPHI XE 验证通过结构:主程序+一个Dll窗体 共享方式原理:通过主程序与各Dll定义相同的参数结构体,由主程序实例化该结构体,对于各Dll间的共享,通过传主程序实例化的结构 ...
- 算法系列6《MAC》
1. 简介 MAC是使用命令的所有元素(包括命令头)产生的.一条命令的完整性,包括命令数据域(如果存在的话)中的数据元,通过安全报文传送得以保证.按照如下的方式使用单重或三重DEA加密方式产生MAC: ...
- rman 命令
OS: Oracle Linux Server release 5.7 DB: Oracle Database 11g Enterprise Edition Release 11.2.0.3.0 - ...
- MicrosoftProjectOxford 微软牛津计划
光学字符识别 上传本地图片或者提供一个图片URL,查看光学字符识别的演示. 视觉特征分析 上传本地图片或者提供一个图片URL,查看视觉特征分析的演示. 缩略图 上传本地图片或者提供一个图片URL,查看 ...
- C# socket 实现消息中心向消息平台 转发消息
公司用到,直接粘代码了 using System; using System.Collections.Generic; using System.Configuration; using System ...
- OC中NSDictionary(字典)、NSMutableDictionary(可变字典)、NSSet(集合)、NSMutableSet(可变集合)得常用方法
字典用于保存具有映射关系数据的集合 一个key—value对认为是一个条目(entry),字典是存储key—value对的容器 与数组不同,字典靠key存取元素 key不能重复,value必须是对象 ...
- Linux下如何使CP命令不提示覆盖
在Linux下使用CP命令,经常会提示是否覆盖,如果是太批量的文件覆盖,老是这么提示,会很烦的.那如何解决这个问题呢? 我们先来看一下原因吧! 一般我们使用的命令是cp -rf sourcefile ...
- MVC4.0 如何设置默认静态首页index.shtml
1.不启用二级域名情况下(www.xxx.com)下设置默认静态首页index.shtml 通过配置IIS的默认文档,设置默认首页地址 然后在MVC的路由中写入忽略默认路由代码 routes.Igno ...
- (转)前端构建工具gulp入门教程
前端构建工具gulp入门教程 老婆婆 1.8k 2013年12月30日 发布 推荐 10 推荐 收藏 83 收藏,20k 浏览 本文假设你之前没有用过任何任务脚本(task runner)和命令行工具 ...