欢迎来到Doc100.Net免费学习资源知识分享平台!
您的位置:首页 > 程序异常 >

现时就能投入使用的12个高端大气上档次的css3特性

更新时间: 2014-01-05 00:53:42 责任编辑: Author_N1

 

现在就能投入使用的12个高端大气上档次的CSS3特性

原文:http://tutorialzine.com/2013/10/12-awesome-css3-features-you-can-finally-use/

原文中有demo展示及下载。

翻译开始:

可能你和我一样,每当看到一个新潮的令人过目不忘的css3特效,就迫不及待的想要应用到自己的网站中去。然后,你就会发现这些新特性只能在一到两个主流浏览器(而且绝不可能是IE)中正常显示,于是乎,你选择了搁置这个特效,开始遥遥无期的等待。现在我有一个好消息要告诉你:在最新版本的浏览器中,不少帅气的CSS3特性已经得到了良好的支持,你现在就可以使用它们了!

提醒下,下面所叙及的大部分特性不能在老版本的IE(9及之前的版本)中使用。如果你的客户中大部分仍在使用这些古董级浏览器,恐怕你还要降级使用那些久经考验的特性。但对其他人来说,尽情享受现代浏览器带给我们的美好吧~

1. CSS动画(Animations)和过渡(Transitions)

终于能在所有主流浏览器中使用CSS动画了,甚至在IE(IE10)中也ok。创建CSS动画主要有两种方式。

第一种很简单,通过在CSS中设定transition属性。你可以使用transition创建鼠标悬停(hover)或点击(mouse down)特效,当然,你也可以通过JavaScript操纵DOM元素CSS的transition属性来触发动画。示例1中,当鼠标悬停时,火箭会过渡至贴近地球表面飞行。

第二种定义动画的方式就略显复杂了,这需要使用@keyframe来定义关键帧。这种方式允许你不用依靠用户操作或JavaScript就能触发一段重复的动画。

【具体代码及演示见源网页,下同。】

CSS动画值得好好学一学,这篇文章很适合用来入门。你也可以查阅各浏览器兼容性。

2.使用calc()来进行计算

上一篇:上一篇
下一篇:下一篇

 

随机推荐程序问答结果

 

 

如对文章有任何疑问请提交到问题反馈,或者您对内容不满意,请您反馈给我们DOC100.NET论坛发贴求解。
DOC100.NET资源网,机器学习分类整理更新日期::2014-01-05 00:53:42
如需转载,请注明文章出处和来源网址:http://www.doc100.net/bugs/t/1114/
本文WWW.DOC100.NET DOC100.NET版权所有。