• [织梦吧]唯一域名:www.dedecms8.com,织梦DedeCMS学习平台.

当前位置: > 网页制作 > DIV+CSS特效 >

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

来源: www.dedecms8.com 编辑:织梦吧 时间:2012-02-07点击:
   

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

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

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

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

  

clip_image001

  View Live Demo

  2.How to use Multiple backgrounds and Animation with CSS3

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

  

clip_image002

  View Live Demo

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

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

  

\

  View Live Demo

  4.Pure CSS Sliding Image Gallery

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

  

clip_image004

  View Live Demo

  5.Making a CSS3 Animated Menu

  CSS3的动画按钮。

  

clip_image005

  View Live Demo

  6.How to Build Cross-Browser HTML5 Forms

  创建跨浏览器的HTML5表单。

  

clip_image006

  View Live Demo

  7.Styling pretty buttons with only CSS3

  CSS3按钮效果。

  

clip_image007

  View Live Demo

  8.Animated wicked CSS3 3d bar chart

  非常漂亮的3D效果。

  

clip_image008

  View Live Demo

  9.Create A Clean and Stylish CSS3 Contact Form

  简洁的联系人表单。

  

clip_image009

  View Live Demo

  10.Phone Style Checkboxes With CSS3

  CSS3验证表单。

  

clip_image010

  View Live Demo

  11.Animated Sprites with CSS3 Transitions

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

  

clip_image011

  View Live Demo

  12.CSS3 Flying Menu

  CSS3按钮效果。

  

clip_image012

  View Live Demo

  13.Popout Details on Hover w/ CSS

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

  

clip_image013

  View Live Demo

  14.HTML5 & CSS3 readiness

  

clip_image014

  View Live Demo

  15.CSS3 Button Maker

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

  

clip_image015

  View Live Demo

  16.Fancy Image Hover Using CSS3

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

  

clip_image016

  View Live Demo

  17.Creating A Rocking CSS3 Search Field

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

  

\

  View Live Demo

  18.Fading Button Background Images With CSS3 Transitions

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

  

\

  View Live Demo

  19.Super Cool CSS Flip Effect with Webkit Animation

  超酷的动画/转换效果。

  

clip_image019

  View Live Demo

  20.Build a HTML5/CSS3 Website Layout without Images

About D8

  • ©2014 织梦吧(d8) DedeCMS学习交流平台
  • 唯一网址 www.DedeCMS8.com 网站地图
  • 联系我们 tom@tiptop.cn ,  QQ