码迷,mamicode.com
首页 > Web开发 > 详细

LEARNING CSS3 ANIMATIONS AND TRANSITIONS(1)

时间:2014-05-22 04:50:47      阅读:338      评论:0      收藏:0      [点我收藏+]

标签:style   c   java   color   a   strong   

  想学CSS3动画来着,但是国内这方面的书确实少,讲的例子动画例子往往也不是很好,于是狠下心上网买了本国外的书,《LEARNING CSS3 ANIMATIONS AND TRANSITIONS》,在接下来的时间,我想通过写博客的方式来记录读书笔记并翻译下这本书,,本人英语不好,翻译不恰当的地方,还望各位看官见谅。

  今天是第一天就翻译下每个章节的介绍好了。

  第一章 使用CSS3动画

  本书的第一章浅谈了浏览器的支持,包括对Modernizer Javascript库的介绍,一个可以让你检测用户的浏览器对HTML5特性的支持情况,同时为了使开发更容易,书中还将介绍一些工具和资源以及使用方法。

  第二章 为Transforms打下基础

  这本书绝大部分内容都使用了CSS3 transforms的强大功能。为了让你更了解它所能实现的效果,第二章详细的介绍了使用CSS3实现的各种2D转换。在这个章节,将带你仅使用CSS和transforms来画一辆自行车。

  第三章 Transitions的动画元素

  第三章讨论了如何结合transforms和transitions使动画在一段时间内运动起来。本章还讨论了如何使其它CSS属性通过transitions运动起来。在这章中你将为第二章的自行车例子添加车轮旋转动画和在用户的请求响应下进行运动。

  第四章 Keyframe和Animations

  Keyframe和Animations将带给你更精细的控制动画中的每个过渡阶段并与transitions做对比。在第四章中你将学习使用keyframe和animations为属性添加上简单动画。你也可以使用keyframe和animations实现弹簧弹跳和气球浮动的动画效果。

   第五章 通过视差滚动实现3D效果

  第五章将结合keyframe,animations和transforms视差滚动的概念使得你构建出的内容能在没有任何3D处理的情况下呈现出3D效果。在这章中将展现两个示例案例,它们都是使用视差滚动的概念在2D空间中创建立体感。

  第六章 通过3D转换添加深度

  第六章介绍了如何通过使用3D转换的特性改变元素的深度。本章将探讨可以应用到transforms属性的各个转换函数,同时还将探讨如何有效地使用perspective属性并查看转换后的结果。

  第七章 2D和3D的转换动画

  第七章演示了如何通过CSS3的transitions,keyframe和animations结合2D和3D的转换来实现有趣的效果。在本章中,通过使用transitions,一些HTML5的范围输入类型标签和少量的JavaScript使得你在第六章创建的3D立方体能围着三个坐标轴旋转。

  第八章 使用Transitions和Tranforms让文本动起来

  在第八章中你将结合keyframe,animations,transitions,transforms和少量的jQuery来创建一个文本驱动动画。使用CSS3去为标签添加上一些基础样式使得看起来打字机的一部分,然后你将通过Virginia Woolf为打字机打出的文本添加上动画。

  第九章 通过Keyframe和Animations创建flash风格的动画

  在第九章中将结合前几章讨论的知识创建一只具有动画风格的小猫。动画在不同的场景中并在JavaScript定时器的触发下呈现出两种不同的风格。

  第十章 创建动画的信息图表

  第十章涵盖了信息图表的基础知识并教你如何为它添加上动画。结合书中之前所学知识,第十章概述了如何为不同成分比例的6种混合饮品建立一个简单可视化数据的每个步骤。

  第十一章 创建交互的信息图表

  通过一门语言,如JavaScript或者像jQuery之类的类库为信息图表增加交互性。在第十一章中,你将对第十章的信息图表做一些增加,结合使用CSS动画和jQuery使得饮料配方表更加丰富。

  终于翻译完每个章节的介绍了,还是那句话,翻译不好的地方,还望见谅。

LEARNING CSS3 ANIMATIONS AND TRANSITIONS(1),布布扣,bubuko.com

LEARNING CSS3 ANIMATIONS AND TRANSITIONS(1)

标签:style   c   java   color   a   strong   

原文地址:http://www.cnblogs.com/helbing/p/3738294.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!