快速业务通道

CSS3教程与技巧演示21例

作者 佚名技术 来源 CSS编程 浏览 发布时间 2012-05-26

  CSS3 已经变得很流行。大部分的浏览器比如IE7、IE8、Safari、Firefox和Chrome,都支持新的CSS3属性。CSS3有非常多的web和移动方面的功能。

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

1.iPhone “slide to unlock” Text in WebKit/CSS3

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

css3-12

View Live Demo

2.How to use Multiple backgrounds and Animation with CSS3

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

css3-2

View Live Demo

3.Advanced (yet awesome) pure CSS3 boxes without using images

纯CSS3的效果,如下图,好似Photoshop制作。css3-3

View Live Demo

4.Pure CSS Sliding Image Gallery

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

css3-24

View Live Demo

5.Making a CSS3 Animated Menu

CSS3的动画按钮。

css3-6

View Live Demo

6.How to Build Cross-Browser HTML5 Forms

创建跨浏览器的HTML5表单。

css3-7

View Live Demo

7.Styling pretty buttons with only CSS3

CSS3按钮效果。

css3-8

View Live Demo

8.Animated wicked CSS3 3d bar chart

非常漂亮的3D效果。

css3-9

View Live Demo

9.Create A Clean and Stylish CSS3 Contact Form

简洁的联系人表单。

css3-10

View Live Demo

10.Phone Style Checkboxes With CSS3

CSS3验证表单。

css3-11

View Live Demo

 

11.Animated Sprites with CSS3 Transitions

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

css3-1

View Live Demo

12.CSS3 Flying Menu

CSS3按钮效果。

css3-13

View Live Demo

13.Popout Details on Hover w/ CSS

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

css3-14

View Live Demo

14.HTML5 & CSS3 readiness

css3-15

View Live Demo

15.CSS3 Button Maker

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

css3-16

View Live Demo

16.Fancy Image Hover Using CSS3

CSS3制作的悬停效果,见下图。这可不是jquery做的哦。

css3-17

View Live Demo

17.Creating A Rocking CSS3 Search Field

CSS3搜索域,该案例涉及到多个CSS3属性css3-23

View Live Demo

 

18.Fading Button Background Images With CSS3 Transitions

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

 

css3-19

 

View Live Demo

19.Super Cool CSS Flip Effect with Webkit Animation

超酷的动画/转换效果。

css3-20

 

View Live Demo

20.Build a HTML5/CSS3 Website Layout without Images

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

css3-21

View Live Demo

21.Pure CSS Reflections

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

css3-22

View Live Demo

 

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号