CSS3.0的应用实例

http://css3.bradshawenterprises.com/
这是翻译的,引用了这个css3.0的例子:使用css3实现渐变、变换和动画效果
简介
首先需要介绍的是这些例子是使用css实现渐变、变换(2D和3D)和动画效果。现代浏览器包括IE9都能实现该2D效果,除了比IE10更老的版本。而3D变换效果只能在Safari和Chrome上有支持。动画效果在Safari、chrome和Firefox5+版本支持。大部分的例子的变换都挺好的,如果你仍然使用很旧的浏览器,也能看到一个页面,但无法看到动画效果。3D变换变换不是很好,所以,使用3D变换的时候要小心了。
这些动画效果没有使用Javascript,但使用了jQuery来增加、删除classes来改善交互体验。可以使用:targer伪类选择器。这里我只使用了简单可扩展的例子。
如果使用的是iOS,应该适当的使用touch、hold替换hover。
许多变换中,我只使用了两幅图片来简化例子。这些都很容易扩展到多幅图片。
特别需要注意的一点是,这些动画不需要repaint(渐变、透明度),这是iOS提高的地方。所以,如果你在创建一个手机网站,你当然可以使用这种方法,而不是使用jQuery动画方法。
为了更好地查看代码,每个例子都使用了样式和脚本。在产品中不推荐这种做法。
请看示例。
请使用IE10,或者Chrome、Firefox、Safari等
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值