css3 Keyframes 学习及实例

Keyframes 是 W3C 草案中 Animation 模块的一部分。在 Keyframes 中,每一组动画都可以赋予一个名称,通过它可以灵活地定义元素要执行的动画。
遗憾的是,到目前为止,只有高版本的浏览器支持这一特性,局部差异化开发,一直都是 CSS3 和 HTML5 先行者坚持的立场。

先看个实例:css3_keyframes实例

接下来我们需要了解一下如何通过 Keyframes 定义一组动画,Keyframes 的定义实际上是非常简单的,下面是 W3C 提供的实例代码:

/** 在实际应用中,应该使用 WebKit 私有属性 @-webkit-keyframes 作为属性名 **/
@keyframes wobble {
    0% {
      left: 100px;
    }
    40% {
      left: 150px;
    }
    60% {
      left: 75px;
    }
    100% {
      left: 100px;
    }
}

上面的代码中,定义了一个名为 wobble 的动画,它将在动画开始的时候(0%),将元素的位置的定位到 100px,然后过渡到 150px,75px,最后在结束动画的时候(100%)回到起始位置。这实际上是一个让元素水平摆动的动画,它看上去非常的简单。代码中的 0% 和 100% 可以分别使用 from 和 to 来代替,表示动画起始和终止时的状态,其他时候的状态则使用百分比来定义,对 flash 有一些了解的同学,可以把它理解为 Flash 中的关键帧。接下来是我们的呼吸灯按钮的keyframes 定义,这组动画被命名为 breathingLight ,并且在动画起始、结束、和中间位置插入“关键帧”,重设元素的背景色和阴影:

@-webkit-keyframes breathingLight {
        from {
                background-color: #80CB1B;
                -webkit-box-shadow:0 0 5px #ccc;
        }
	50% {
                background-color: #B7F20F;
                -webkit-box-shadow: 0 0 10px #398B08;
        }
	to {
                background-color: #80CB1B;
                -webkit-box-shadow:0 0 5px #ccc;
        }
}

keyframes 定义好了以后,需要告诉浏览器怎么去调用刚才定义好的名为 breathingLight 的动画。很显然,我们应该在最初添加到页面中的 a 元素进行设定:

a.demo {
	-webkit-animation-name: breathingLight;
	-webkit-animation-duration: 3s;
	-webkit-animation-iteration-count: infinite;
}

在这个应用中,为了执行动画,按钮被添加了 3 个属性,第一个属性 -webkit-animation-name,是为元素指定要执行的动画名,也就是刚才我们定义的 keyframes 。
第二个属性 -webkit-animation-duration 很好理解,它声明了一次动画执行的时间,这里设定为了3秒。
第三个属性 -webkit-animation-iteration-count 定义了元素执行动画的次数,默认值是1次,也可以指定次数,这里的 infinite 顾名思义就是无限地循环执行。
事实上定义动画的属性不只是局限于这3个,完整的属性和它们的用途在下面的表格中,在实际代码编写时,记得为这些属性名加上 -webkit 的私有前缀。

属性 可用值 描述
animation-name name 动画名
animation-duration time 动画执行的时间
animation-timing-function ease、linear 等 动画函数
animation-iteration-count infinite、number 重复次数
animation-direction normal | alternate 反转动画方向
animation-delay time 延时

参考:http://www.moke8.com/article-529-1.html

background-size解决iphone图片清晰问题

iphone上面网页显示时,一般把原图缩小一半后,就清晰了,直接原图不清晰。拿到的设计图也是640px宽的,但是最近遇到一个问题。

问题描述:

如果把图片直接插入到页面,图片直接切出来,在页面中写的时候,把宽度设置,缩小一倍就可以了。但是当高度不固定时,只能用背景实现时,就出现了问题。前景方法已不适用了。

开始的时候,背景按320px切的,在页面上显示就出现了模糊的情况。

感觉这个问题挺难解决的,开始的时候想的还是利用绝对/相对定位去做,但是后来发现不可行。

群内有提到background-size,这个属性,就查了一下。

“background-size是CSS3提供的一个新特性,它可以让你随心所欲的控制背景图的尺寸大小。”

先简要的看看background-size的用法。我们知道在CSS2中,背景图的大小在样式中是不可控的,比如要想使得背景图填充满某个区域,你要么重新做帐大点的图,要么就只能让它以平铺的方式来填充。

如今background-size让你既可以直接缩放背景图来填充满这个区域,也可以让你先给背景图设置大小,然后以设置好的尺寸去平铺满这个区域。

background-size需要1个或2个值,这些值既可以是像素px,也可以是百分比%或auto,还可以是特定值cover, contain。

background-size可以设置2个值,1个为必填,1个为可选。其中第1个值用于指定背景图的width,第2个值用于指定背景图的height,如果只给background-size设置1个值,则第2个值默认为auto(cover和contain特定值除外)。

background-size的特定值:

cover: 保持图像本身的宽高比例,将图片缩放到正好完全覆盖定义背景的区域;
contain: 保持图像本身的宽高比例,将图片缩放到宽度或高度正好适应定义背景的区域;

这个具体还没有用过,我使用的时候是将背景部分,仍以两倍大小来切出来,在css中,将background-size的值设为缩放后的大小,问题就解决了。

 

css3之彩色边框

W3C已经在CSS3中提供了一些新的Border选项。

其中,圆角边框,边框颜色很有趣。

Mozila/Firefox已经实现了这项功能,它允许你创建彩色边框。这是一个例子:

预览:color-border

CSS代码是:

border: 8px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors:    #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors:   #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors:  #555 #666 #777 #888 #999 #aaa #bbb #ccc;
padding: 5px 5px 5px 15px;

当然,你还可以得到更漂亮的边框。

原文至:http://www.css3.info/preview/colored-border/

推荐20个关于CSS3优秀学习资源

译者按:CSS2的出现让web顿时丰富起来,特别是web2.0时代CSS成为每个web页面都必不可少的元素。但是随着web技术的发展,CSS2已经不能满足web开发的需求,例如属性选择、AJAX出现后与JS的交互等,因此对下一代的CSS需求越来越明显。目前CSS3还处于草稿阶段,但是其某些特征已经让人兴奋不已。目前主流浏览器Firefox、IE7/8、Webkit等都已经部分地支持CSS3。因此提前了解CSS3是十分必要的。下面提供的20个学习资源中,多数是单篇的文章和访谈记录等,可见这方面的资源还是比较少的,作为一个真正的CSS开发者,走在别人的前面提前了解、运用、研究CSS3也是十分必要的。
尽管W3C还没有最终设定CSS3规范,但是像Mozilla Firefox、Opera以及基于Webkit等的现代浏览器已经开始部分或者全部地支持CSS3了。

作为一个web开发者,充分了解当前和未来的web标准是十分必要的。为帮助大家能够走在趋势的前列,我们特意向推荐下面这20个关于CSS3的优秀学习资源。

1 、CSS3 Progress Report(CSS3项目报告)

  http://www.w3.org/Style/CSS/current-work

CSS3 Progress Report(CSS3项目报告)是CSS工作小组用以对外介绍CSS3模块当前进展状态的官方网站。对于志愿贡献者来说,这里可能是你学习和为CSS3提供改进的最好的地方。

2、 Get Started with CSS3(CSS3入门)

  http://www.webmonkey.com/tutorial/Get_Started_with_CSS_3

Web Monkey为CSS3入门提供了一个大体框架。本站概述了已经在现代浏览器中得到支持的CSS3属性。对于刚刚开始探索CSS3的人来说这是一篇了不起的著作。

3 、Progressive Enhancement with CSS3(CSS3的渐进增强)

  http://dev.opera.com/articles/view/progressive-enhancement-with-css-3-a-be/

Opera,在支持CSS3规范中一直走在前列的一款浏览器,对CSS3在“渐进增强”中的应用有着十分出色的表现。在采用了CSS3的“渐进增加”计划中讨论了你如何在已经使用支持CSS3的现代浏览器和还没有支持CSS3的传统浏览器应用CSS3。

4 、Accessibility Features of CSS

  http://www.w3.org/TR/CSS-access

随着移动手持设备和诸如屏幕阅读器等非传统web浏览器的不断增加,作为对CSS3的一项重要改进,CSS工作小组增加了CSS3的易用性。W3C文档指出在当前和未来的CSS3规范中将会继续保留这些易用的特性。

5. Introduction to CSS3 (Design Shack)

  http://designshack.co.uk/tutorials/introduction-to-css3-part-1-what-is-it

在这个由5部分组成的系列中,Design Shack给读者了一个关于CSS3的完美诠释。文章以朴实的语言对CSS3做了详尽的解释,并对着重讲述了边框和文本效果等CSS3技术。

6. CSS3 . Info

  http://www.css3.info/

CSS3.info是一个关于CSS3方面的极其全面的网站。他们提供了有关CSS3的新闻、访谈记录以及各类资源。该站还提供了一个名为CSS3 Previews的演示模型,因此你可以通过Opera和其他基于Webkit的浏览器来体验CSS3的相关模块和功能。

7. CSS Advanced Layout Module

  http://www.w3.org/TR/css3-layout/

了解CSS3规范中更加常用的模块:高级布局模块(the Advanced Layout Module)。这是W3C的一个工作草稿,不过它足以向我们这些web开发者显示CSS3的伟大之处了。

8. Six Questions: Eric Meyer on CSS3

  http://sixrevisions.com/interviews/six-questions-eric-meyer-on-css3/http:/sixrevisions.com/interviews/six-questions-eric-meyer-on-css3/

Eric Meyer是一个有幸参加6次CSS3修订的CSS专家。在这次访谈中,Eric Meyer说其中最让他兴奋的CSS3中的模块方向的发展以及与JavaScript的紧密关系。你可以直接点击这里查看“就 CSS3 向 Eric Meyer 请教的 6 个问题” 。

9. CSS3 properties tests for webkit based browsers

  http://westciv.com/iphonetests/

在这个在线演示中,你会打到诸如Safari等基于Webkit的浏览器目前已经支持(和未支持)的CSS3属性;它还提供了可用于iPhone的一些CSS3属性的相关信息。

10. WaSP Community CSS3 Feedback

  http://fantasai.inkedblade.net/style/discuss/wasp-feedback-2008

本文是对于web标准项目(Web Standards Project,WaSP )发表的一篇名为“告诉CSS工作小组你喜欢从CSS3中得到什么(Tell the CSS WG what you want from CSS3)”博客的反馈信息的详细总结。通过这篇文章你可以看到世界web开发者对目前CSS3规则期望。

11. CSS 3 attribute selectors

  http://dev.opera.com/articles/view/css-3-attribute-selectors/

CSS3中一个令人兴奋的改进就是对于复杂而以具体的DOM的选择能力。Dev.Opera展示了CSS3中这项新属性选择功能。

12. W3C: Selectors

  http://www.w3.org/TR/css3-selectors/

选择符是W3C在CSS3工作草图中引入的一个相当棒的概念。

13. Conversation with CSS 3 team

  http://xhtml.com/en/css/conversation-with-css-3-team/

XHTML.com对于Bert Bos(前W3C CSS工作小组主席)的采访以CSS顶级专家的眼光审视CSS3的开发。

14. The fundamental problems with CSS3

  http://mattwilcox.net/archive/entry/id/1031/

Matt Wilcox的这篇文章围绕CSS3讨论了当前要解决的一些问题。

15. CSS Working Group Blog

  http://www.w3.org/blog/CSS

CSS标准的维护和开发者,CSS工作小组(CSS Working Group, CSS WG),经常更新其博客以提供有关CSS3的有用信息。

16. Rounded Corner Boxes the CSS3 Way

  http://24ways.org/2006/rounded-corner-boxes-the-css3-way

年度在线出版物24 Ways上发表了一篇名为“顶级web专家(top web professionals)”的文章,这是CSS专家Andy Budd的一篇关于用CSS实现圆角框的文章。它展示了CSS3的一个样式改进:不使用CSS实景实现圆角框。

17. Push Your Web Design Into The Future With CSS3

  http://www.smashingmagazine.com/2009/01/08/push-your-web-design-into-the-future-with-css3/

图形与网页设计家Chris Spooner在Smashing杂志上发表这篇文章深入研究了利用当前已经公布CSS3规范设计网页的草图。这一切现在你就可以用CSS3来做,着实鼓舞人心。

18. Introduction to CSS3 Transparency

  http://www.mandarindesign.com/opacity.html#transintro

这篇文章探索并解释了CSS3中透明度的概念,这也是CSS色彩模块(CSS Color Module)中的一个概念。

19. Styling Forms with Attribute Selectors

  http://dev.opera.com/articles/view/styling-forms-with-attribute-selectors/

Dev.Opera在样式化表单的示例中展现了属性选择器的好处。

20. 5 Techniques to Acquaint You With CSS3

  http://nettuts.com/tutorials/html-css-techniques/5-techniques-to-acquaint-you-with-css-3/

熟能生巧,NETTUTS的这个教程教你如何在应用中学习CSS3。这篇文章中包括了如何给页面中的元素增加阴影和改变元素的透明度等。

今天您使用CSS3了吗?
在您的web开发实践中你使用到了CSS3吗?你在学习CSS3的过程中处于什么阶段了?请在下面的评论中和我们一起分享你的想法与经验。