您的位置: 首页 > 技术文档 > 网页制作 > 你需要知道的CSS3动画技术
IE6,7下实现white-space:pre-wrap; 回到列表 清除浮动新说
 你需要知道的CSS3动画技术

作者:vocal 时间: 2009-12-30 文档类型:翻译 来自:前端观察

第 1 页 你需要知道的CSS3动画技术 [1]
第 2 页 你需要知道的CSS3动画技术 [2]
第 3 页 你需要知道的CSS3动画技术 [3]
第 4 页 你需要知道的CSS3动画技术 [4]
第 5 页 你需要知道的CSS3动画技术 [5]
第 6 页 你需要知道的CSS3动画技术 [6]
第 7 页 你需要知道的CSS3动画技术 [7]

译文你需要知道的CSS3 动画技术
译自What You Need To Know About Behavioral CSS
请尊重版权,转载须注明本站链接!

译序:本文译自Smashingmagazine,但是原文讲述的内容有些浅,也不是很完整,前端观察在翻译的前提下,增加了更多的更系统的内容。如有不足之处,欢迎指正补充。

随着网络的发展,浏览器具有更强的渲染更高级代码的能力,我们正逐步实现跨越所有平台和浏览器的目标。我们不但可以要花费更少的时间来确保我们的盒模型在IE6中看起来正常,而且形成了鼓励创新、避免hack、重前端脚本的氛围。

网络是一个非常好的环境,也是一个有丰富的知识来分享的协作社区。我们想要有圆角 ,我们就实现了它;我们想要 多背景图片,我们实现了它;我们想要 边框图片,我们也让它实现了。所以需求从来不是问题,否则,我们可能还都仍然在使用table来布局页面而且使用过多的代码呢。我们都知道,网络无所不能。

为网络而生

CSS 3的属性比如border-radiusbox-shadowtext-shadow 在webkit(Safari、Chrome等)和Gecko(Firefox)等先进的浏览器中的使用开始出现增长的势头。它们(这些CSS属性)已经为用户创建更轻量的页面和更丰富的体验,而且它们可以优雅的降级。然而,这些只是CSS 3能为我们做的众多事情中的一小部分。

在本文中,我们将走的更远,看一看变形(transformation)、转换(transition)和动画(animation) 等更高级的CSS3技术。我们将涉及代码本身、浏览器支持以及一些可以正确地展示这些新属性是如何即提升你的设计又增强整体用户体验的例子。

CSS 变形(Transformation)

CSS transformation是W3C的一个草案。但当我第一次坐下来阅读 它的 全部特性  以了解一些东西的时候,它并没有让我感到开窍。你可以想象的到,这个文档是用技术术语的撰写的,而且它更关注变形的图形(比如绘图)元素和矩阵。大一学习微积分之后就没有碰过矩阵了,我必须为本章节做很多好的旧浏览器测试以及猜测和检验。

在看完我能找到的每一个教程和大量的浏览器测试之后,我总结出一些大家都能从中获益的有用的关于CSS变形的信息。

transform

transform属性实现了一些可用SVG实现的同样的功能。它可用于内联(inline)元素和块级(block)元素。它允许我们旋转、缩放和移动元素——只需要一行CSS代码。

一些前卫设计的最大诟病就是文字不可选(必须要使用切图的方法实现)。当你熟练使用transform属性来控制文字的时候,这就不再是问题了,因为这是个纯CSS方法,所以元素内的文字会保持可选。这是CSS相对于使用图片(或背景图片)的一个巨大优势。

一些有趣而有用的变形功能

  • rotate
    Rotate(旋转)允许你通过传递一个度数值来转动一个对象。
  • scale
    Scale是一个缩放功能,可以让任一元素变的更大。它使用正数和负数以及小数作为参数。
  • translate
    Translate就是基于X和Y 坐标重新定位元素
  • skew
    顾名思义,skew就是要将对象倾斜,参数是度数
  • matrix
    transform支持矩阵变换,就是基于X和Y 坐标重新定位元素

下面让我们更深入的了解每一个功能吧。

出处:前端观察
责任编辑:bluehearts

上一页 下一页 你需要知道的CSS3动画技术 [2]

◎进入论坛网页制作WEB标准化版块参加讨论,我还想发表评论

相关文章 更多相关链接
IE6,7下实现white-space:pre-wrap;
清除浮动新说
揭秘HTML5和CSS3
CSS阴影详解
CSS Sprites(CSS雪碧):要还是不要?
作者文章 更多作者文章
Zen Coding:快速编写HTML/CSS代码
极简主义网站设计:寓丰富于简单
CSS阴影详解
CSS Sprites(CSS雪碧):要还是不要?
行动召唤按钮在网页中的实例与实践
关键字搜索 常规搜索 推荐文档
热门搜索:CSS Fireworks 设计比赛 网页制作 web标准 用户体验 UE photoshop Dreamweaver Studio8 Flash 手绘 CG
站点最新 站点最新列表
周大福“敬•自然”设计大赛开启
国际体验设计大会7月将在京举行
中国国防科技信息中心标志征集
云计算如何让安全问题可控
云计算是多数企业唯一拥抱互联网的机会
阿里行云
云手机年终巨献,送礼标配299起
阿里巴巴CTO王坚的"云和互联网观"
1499元买真八核 云OS双蛋大促
首届COCO桌面手机主题设计大赛
栏目最新 栏目最新列表
浅谈JavaScript编程语言的编码规范
如何在illustrator中绘制台历
Ps简单绘制一个可爱的铅笔图标
数据同步算法研究
用ps作简单的作品展示页面
CSS定位机制之一:普通流
25个最佳最闪亮的Eclipse开发项目
Illustrator中制作针线缝制文字效果
Photoshop制作印刷凹凸字体
VS2010中创建自定义SQL Rule
>> 分页 首页 前页 后页 尾页 页次:1/71个记录/页 转到 页 共7个记录

蓝色理想版权申明:除部分特别声明不要转载,或者授权我站独家播发的文章外,大家可以自由转载我站点的原创文章,但原作者和来自我站的链接必须保留(非我站原创的,按照原来自一节,自行链接)。文章版权归我站和作者共有。

转载要求:转载之图片、文件,链接请不要盗链到本站,且不准打上各自站点的水印,亦不能抹去我站点水印。

特别注意:本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有,文章若有侵犯作者版权,请与我们联系,我们将立即删除修改。

您的评论
用户名:  口令:
说明:输入正确的用户名和密码才能参与评论。如果您不是本站会员,你可以注册 为本站会员。
注意:文章中的链接、内容等需要修改的错误,请用报告错误,以利文档及时修改。
不评分 1 2 3 4 5
注意:请不要在评论中含与内容无关的广告链接,违者封ID
请您注意:
·不良评论请用报告管理员,以利管理员及时删除。
·尊重网上道德,遵守中华人民共和国的各项有关法律法规
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·本站评论管理人员有权保留或删除其管辖评论中的任意内容
·您在本站发表的作品,本站有权在网站内转载或引用
·参与本评论即表明您已经阅读并接受上述条款
推荐文档 | 打印文档 | 评论文档 | 报告错误  
专业书推荐 更多内容
网站可用性测试及优化指南
《写给大家看的色彩书1》
《跟我去香港》
众妙之门—网站UI 设计之道
《Flex 4.0 RIA开发宝典》
《赢在设计》
犀利开发—jQuery内核详解与实践
作品集 更多内容

杂⑦杂⑧ Gold NORMANA V2