你需要知道的CSS3 动画技术[译]

作者:神采飞扬 来源:前端观察 时间:2009-12-30 17:02:00 


译序:本文译自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 坐标重新定位元素

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

标签:CSS3,动画,设计师
0
投稿

猜你喜欢

  • 关于自动化测试框架pytest的Fixture固件

    2023-10-16 00:02:50
  • python SOCKET编程基础入门

    2021-04-20 17:22:33
  • 如何用Python对数学函数进行求值、求偏导

    2023-10-13 04:58:01
  • ASP利用TCPIP.DNS组件获得域名对应的IP

    2009-11-07 19:21:00
  • Python函数默认参数常见问题及解决方案

    2023-04-03 15:42:42
  • python轻松过滤处理脏话与特殊敏感词汇

    2022-02-07 15:53:28
  • 简介JavaScript错误处理机制

    2024-04-19 10:26:43
  • MySQL EXPLAIN执行计划解析

    2024-01-26 14:35:28
  • Python实现滑动平均(Moving Average)的例子

    2023-02-10 22:36:58
  • 泛域名设置问题

    2008-03-25 10:03:00
  • 基于Python数据结构之递归与回溯搜索

    2022-02-27 01:40:33
  • python命令行参数argparse模块基本用法详解

    2023-07-31 03:14:21
  • PL/SQL 类型格式转换

    2009-02-26 11:07:00
  • windows下重置mysql的root密码方法介绍

    2024-01-17 18:37:35
  • ACCESS 2007出现“错误 '80040e14'“

    2008-06-19 13:21:00
  • tensorflow创建变量以及根据名称查找变量

    2023-08-13 10:13:06
  • [Oracle] CPU/PSU补丁安装详细教程

    2024-01-27 22:17:52
  • 未将对象引用设置到对象的实例 (System.NullReferenceException)

    2023-06-27 10:46:53
  • Python面向对象之成员相关知识总结

    2022-09-18 22:27:27
  • SQL Server 使用 SET FMTONLY ON 获得表的元数据

    2024-01-24 00:20:41
  • asp之家 网络编程 m.aspxhome.com