`
xiaomogu
  • 浏览: 51439 次
  • 性别: Icon_minigender_2
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

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等
分享到:
评论

相关推荐

    Div+CSS 3.0网页布局案例精粹

    9. **案例分析**:书籍中的案例精粹部分将展示实际的网页布局实例,通过这些实例,读者可以学习到如何结合使用Div和CSS 3.0的各种技巧来解决实际设计问题。 10. **最佳实践**:书中可能会涵盖一些最佳实践,比如...

    CSS3.0.rar_css3.0

    提供的《CSS3.0帮助手册》(CSS3.0(飘零雾雨版).chm)是一份实用的资源,其中详细解释了这些概念,并通过实例展示了如何在实践中应用。对于初学者来说,这是一个很好的学习工具,可以帮助快速掌握CSS3.0的核心技能...

    CSS 3.0 中文参考手册(CHM版).rar

    "CSS 3.0 中文参考手册"作为一本CHM版的指南,为学习者提供了详细的CSS 3.0规范解析和实例演示。jb51.net这个网站可能提供了手册的下载链接,该网站通常汇集了各种编程技术的教程和参考资料,是开发者学习和解决问题...

    CSS完全参考手册(包含CSS3.0)

    《CSS完全参考手册(包含CSS3.0)》详细阐述了这些特性,并通过实例展示如何在实践中应用。无论你是网页设计新手还是经验丰富的开发者,这本手册都将是你不可或缺的工具,帮助你掌握和利用CSS3.0的力量,创造出更...

    CSS 3.0 中文参考手册(CHM版)

    本“CSS 3.0 中文参考手册”提供了详尽的指导和实例,旨在帮助中文用户深入理解和应用这一强大的技术。 **CSS 3.0的新特性与扩展** 1. **选择器增强**:CSS 3.0引入了更复杂的选择器,如伪类(`:hover`, `:active`...

    javascript+css3.0完美效果实现

    在IT行业中,JavaScript和CSS3.0是网页开发不可或缺的两个关键部分,它们共同作用于网页的动态交互和视觉呈现,创造出引人入胜的用户体验。"javascript+css3.0完美效果实现"这一主题旨在探讨如何巧妙地结合这两者,...

    CSS3.0 起步入门

    在这个563页的“CSS3.0 起步入门”教程中,我们将深入探讨这个强大的样式表语言,帮助初学者快速掌握其核心概念和实际应用。 首先,我们来了解CSS3.0的基础知识。CSS3.0 分为模块进行开发,如选择器、边框和背景、...

    css3.0.rar_CSS3_css3.0_html chm

    "css3.0.chm"这份文档将详细讲解这些特性,并提供实例和解释,是初学者和进阶者学习CSS3的理想资料。通过阅读和实践,你可以掌握如何利用CSS3提升网站的设计质量和用户体验。在HTML页面中应用CSS3技术,不仅可以美化...

    CSS完全参考手册3.0.chm中文版带实例

    此手册还提供了丰富的实例,帮助读者深入理解和应用CSS3的新功能。 1. **选择器**:CSS3扩展了选择器的功能,包括类选择器、ID选择器、元素选择器等基础选择器外,还引入了伪类(如`:hover`、`:active`、`:focus`)...

    css2.0参考手册和css3.0参考手册

    《CSS2.0参考手册》和《CSS3.0参考手册》是前端开发者不可或缺的工具书,它们详尽地介绍了CSS语言的各个方面,为网页设计提供了强大的理论支持和实践指导。 CSS,全称Cascading Style Sheets,即层叠样式表,是用于...

    css3.0参考手册(腾讯技术团队整理).chm

    《CSS3.0参考手册》是由腾讯技术团队精心整理的一份详尽的Web前端开发指南,专注于CSS3.0这一现代网页样式语言的最新版本。这份手册深入浅出地介绍了CSS3的新特性和用法,旨在帮助开发者充分利用CSS3的能力,创建出...

    html5+css3.0参考手册

    这个"html5+css3.0参考手册"很可能包含了对这两个技术的详细解释、实例代码和最佳实践。对于开发者来说,这是一份非常宝贵的资源,它可以帮助理解并掌握HTML5和CSS3.0的新特性和用法,从而构建出更具现代感和用户...

    CSS2.0和CSS3.0.rar

    CSS2.0和CSS3.0的CHM文档提供了一个离线的、易于检索的参考资源,包含详细的规范、实例和常见问题解答,对于学习和查阅CSS非常有帮助。 综上所述,CSS2.0和CSS3.0作为网页设计的核心技术,其丰富的属性、选择器、...

    CSS2.0和CSS3.0 的实用手册(含示例)

    本手册将深入探讨CSS2.0和CSS3.0的核心概念、语法以及它们在网页设计中的实际应用。 **CSS2.0:稳定的基础** CSS2.0于2002年由W3C发布,它是继CSS1.0之后的一个重要升级,为网页设计提供了更丰富的样式控制和定位...

    css3.0参考手册.rar(Tecent QZone开发组总结)

    总的来说,《CSS3.0参考手册》是开发人员掌握和应用CSS3.0的宝贵资源,它不仅包含了大量的实例和代码示例,还提供了关于浏览器兼容性的实用建议,帮助开发者创建出更具吸引力且具有良好用户体验的网页。

    css3.0参考手册

    **CSS3.0详解** CSS(层叠样式表)是网页设计的核心技术之一,用于定义网页元素的布局、颜色、字体等视觉效果。CSS3.0作为CSS的最新版本,引入了许多新特性,大大增强了网页设计的灵活性和表现力。本参考手册旨在...

    CSS3.0中文帮助手册

    学习CSS3.0时,不仅要理解每个特性的概念,还要通过实例来实践。可以尝试创建不同的网页布局,利用新功能美化元素,或者通过媒体查询实现响应式设计。同时,关注浏览器的兼容性,确保设计能在不同环境下正常工作。 ...

    css3.0.rar_2012_CSS3

    在学习这个“css3.0.chm”手册时,你可以深入理解每一个新特性,通过实例练习来熟练掌握它们,并在实际项目中灵活运用,以创建更具吸引力和功能性的网页。无论是初学者还是经验丰富的开发者,CSS3.0都是一个不可或缺...

    CSS 3.0 参考手册(中文)

    通过深入学习和实践手册中的内容,你可以掌握CSS3.0的核心技能,为网页和应用程序的视觉设计带来创新和提升。 总之,"CSS 3.0 参考手册(中文)"是一份宝贵的学习资源,不仅涵盖了CSS3.0的关键特性,还提供了实践案例...

Global site tag (gtag.js) - Google Analytics