21个新鲜的CSS 3教程与技巧.docx

21个新鲜的CSS 3教程与技巧.docx

《21个新鲜的CSS 3教程与技巧.docx》由会员分享，可在线阅读，更多相关《21个新鲜的CSS 3教程与技巧.docx（11页珍藏版）》请在冰豆网上搜索。

21个新鲜的CSS3教程与技巧

21个新鲜的CSS3教程与技巧

2011-05-2709:

28|2814次阅读|来源：

开源中国社区【已有5条评论】发表评论

关键词：

3,CSS|作者：

老枪|收藏这篇资讯

CSS3已经变得很流行。

大部分的浏览器比如IE7、IE8、Safari、Firefox和Chrome，都支持新的CSS3属性。

CSS3有非常多的web和移动方面的功能。

本文列出21个新鲜的CSS3教程和技巧，供大家学习、交流。

1.iPhone“slidetounlock”TextinWebKit/CSS3

iPhone的滑动解锁的文本效果。

ViewLiveDemo

2.HowtouseMultiplebackgroundsandAnimationwithCSS3

CSS3，可以实现对象的多背景，以及简单的动画效果。

ViewLiveDemo

3.Advanced（yetawesome）pureCSS3boxeswithoutusingimages

纯CSS3的效果，如下图，好似Photoshop制作。

ViewLiveDemo

4.PureCSSSlidingImageGallery

纯CSS制作的图片滑动效果。

ViewLiveDemo

5.MakingaCSS3AnimatedMenu

CSS3的动画按钮。

ViewLiveDemo

6.HowtoBuildCross-BrowserHTML5Forms

创建跨浏览器的HTML5表单。

ViewLiveDemo

7.StylingprettybuttonswithonlyCSS3

CSS3按钮效果。

ViewLiveDemo

8.AnimatedwickedCSS33dbarchart

非常漂亮的3D效果。

ViewLiveDemo

9.CreateACleanandStylishCSS3ContactForm

简洁的联系人表单。

ViewLiveDemo

10.PhoneStyleCheckboxesWithCSS3

CSS3验证表单。

ViewLiveDemo

11.AnimatedSpriteswithCSS3Transitions

CSS3动画，准确的说，CSS3转换，不需要JavaScript。

ViewLiveDemo

12.CSS3FlyingMenu

CSS3按钮效果。

ViewLiveDemo

13.PopoutDetailsonHoverw/CSS

弹出效果，非常不错，很容易被实现。

ViewLiveDemo

14.HTML5&CSS3readiness

ViewLiveDemo

15.CSS3ButtonMaker

CSS3,按钮制作，可以通过拖曳等，制作漂亮的CSS，为了你的按钮。

ViewLiveDemo

16.FancyImageHoverUsingCSS3

CSS3制作的悬停效果，见下图。

这可不是jquery做的哦。

ViewLiveDemo

17.CreatingARockingCSS3SearchField

CSS3搜索域，该案例涉及到多个CSS3属性

ViewLiveDemo

18.FadingButtonBackgroundImagesWithCSS3Transitions

这个变换效果，会再次让你以为是用flash制作的。

ViewLiveDemo

19.SuperCoolCSSFlipEffectwithWebkitAnimation

超酷的动画/转换效果。

ViewLiveDemo

20.BuildaHTML5/CSS3WebsiteLayoutwithoutImages

无需图片，创建网站布局。

ViewLiveDemo

21.PureCSSReflections

看图就知道哦，确保你用的是基于webkit的浏览器。

ViewLiveDemo

原文出自：

开源中国社区