Tagged

动画

A collection of 7 posts

动画

利用css3-animation来制作逐帧动画

前言 趁着还没有元旦之前先码一篇文章,不然到时候估计又被各种虐了,所以趁现在还有力气先来一篇。今天来聊聊css3中的动画属性animation,对这个属性懵懂是在很早的时候有前辈用这个 animation 属性来写了一个菊花打转的loading,然后google了一下知道了有这么一个css动画组件叫做 animation.css 其实还有很多这种动画组件,他们很多都是基于jquery来操作的。今天我们不是来谈他们怎么用的,只是来了解一下执行这些动作后的这个animation属性,到底是怎么起到作用的。 先上最终demo:奔跑的小人物 或者拿出手机手机扫一扫 动态效果如下 假如你想要用非gif做一些css的逐帧动画,那不妨可以看看这篇文章,说不定哪天还真用得着呢 animation介绍 对于这个css3属性,w3c定义其为实验性技术,那么自然对于那些非高帅富浏览器来说都是痛,通过caniuse我们可以直观看见这个属性浏览器支持情况: IE10+和firefox33+支持这个属性切不需要写私有前缀,chrome31+,safari7+,andriod4.1+都需要写上自己的私有前缀才可以支持,不过oprea电脑端支持,但是移动端的却不支持,无解。w3c的官方文档 属性名:animation属性值: single-animation初始值:详见独立属性值应用于: 所有元素继承性:无百分比: N/A计算值: single-animation的值有<

css3

iAnimator-CSS3动画制作工具

基于CSS3的动画越来越火爆,各大网站都开始尝试使用CSS3来达到更炫的用户体验,Google的logo也一次次吸引着大家的眼球,但光鲜的CSS3动画后面,可能是前端攻城师不断修改查看修改查看反复的一个过程,对时间、位置的精确把控,意味着巨大的工作量,于是,iAnimator来了! 简介 动画制作软件一般为本地客户端软件,如Sencha Animator 、EDGE等,功能非常强大,但是生成的代码过于庞大臃肿,并且收费,而iAnimator采用WEB方式来实现可视化的CSS3动画制作,轻巧、快速,可扩展性强 基于iAnimator制作动画,因为可视化,及预置的特效,及众多属性面板,可以大大提高动画制作的精确性,减轻前端开发人员工作量 体验 http://ianimator.kundy.net/ 主界面 特色 1. 批量上传图片素材 2. 丰富的属性面板 3. 图层、帧的灵活控制 4. 可视化图层编辑 5. 丰富的特效库 6. 快速预览 7. 快速集成

css3

47个惊人的CSS3动画演示

翻译自:[47 Amazing CSS3 Animation Demos](http://www.webdesignerwall.com/trends/47-amazing-css3-animation-demos/) 中文原文:[47个惊人的CSS3动画演示](http://www.qianduan.net/47-amazing-css3-animation.html) 请尊重版权,转载请注明来源,多谢! - - - - - - 或许你已经看过很多关于CSS3动画的技术,包括前端观察之前发表的一些,那么现在就情看一看CSS3动画的魅力吧。这里是一辑47个令人瞠目结舌的CSS3动画演示。他们演示了CSS3能给我们带来的巨大的可能性。 1.使用jQuery的CSS3时钟 2.模拟时钟 3.使用方向键旋转的3D盒子 4.多个3D盒子(滑入/滑出) 5. CSS3折叠 6. 自动滚动的视差 7. Isocube

css3

你需要知道的CSS3 动画技术

译自:[你需要知道的CSS3 动画技术](http://www.qianduan.net/what-you-need-to-know-about-behavioral-css.html) 译自:[What You Need To Know About Behavioral CSS](http://www.smashingmagazine.com/2009/12/19/what-you-need-to-know-about-behavioral-css/) 请尊重版权,转载须注明本站链接!- - - - - - **译序:**本文译自Smashingmagazine,但是原文讲述的内容有些浅,也不是很完整,[前端观察](http://www.qianduan.net)在翻译的前提下,增加了更多的更系统的内容。如有不足之处,欢迎指正补充。 随着网络的发展,浏览器具有更强的渲染更高级代码的能力,我们正逐步实现跨越所有平台和浏览器的目标。

jquery

10个jquery动画菜单:插件和教程

jquery是一个非常容易使用,同时也是扩展性很好的一个javascript框架。使用jquery可以非常容易的实现一些页面的ajax效果。本文收集一批使用jquery实现很酷的动画效果菜单的插件和教程。 插件 LavaLamp 相信很多人都见过这个很酷的菜单插件,也有很多网站成功的应用了这个插件。 插件主页 jquery Kwicks 插件 如果你多Mootools有些了解,或许会注意到Mootools上一版主页的一个滑动菜单效果(现在已经看不到了)。这个插件就是来自于这个效果,很酷,也很容易定制。使用这个插件不仅仅可以制作非常个性的菜单,制作某些步骤演示也非常合适——比如购物流程的演示。插件主页 查看演示 | 下载 仿Mac的停靠菜单插件 这是个仿苹果机的停靠菜单的一个jQuery插件,支持水平和竖直两种。查看插件页面。 查看演示 | 下载 jquery滑动菜单 一个和LavaLamp很像的菜单,而且脚本只有不到1kb(lavalamp也是这么小),也比较容易使用。该菜单的原理是,通过在当前ul元素的下面(或者说”后面”更合适些?)添加一个额外的div,用position定位该div。然后用jquery和插件来控制这个div的大小和位置,并实现动画效果。 查看演示 | 下载 教程 CSS Sprites2 – 使用jquery制作动画菜单