45个非常奇妙的 CSS3 特性应用示例

标签： css3 应用 | 发表时间：2011-12-29 09:05 | 作者：梦想天空（山边小溪） zhaoloving
出处：http://www.cnblogs.com/

这篇文字收集了45个让人觉得不可思议的 CSS3 应用示例，它们验证了 CSS3 Transform 和 Transition 等属性的强大能力。随着越来越多的浏览器对 CSS3 支持的不断完善，设计师和开发者们有了更多的选择，以前需要使用 JavaScript 才能实现的各种很酷的界面效果和动画，如今使用纯 CSS 代码就可以很容易实现。

CSS3 Clock With jQuery

css3 clock

Another Image Gallery

image gallery

Sliding Vinyl

sliding vinyl

3D Cube That Rotates Using Arrow Keys

3d cube

Multiple 3D Cubes (Slide In/Out)

multiple 3d cubes

CSS3 Accordion

css3 clock

Auto-Scrolling Parallax

auto scrolling parallax

Isocube

isocube

Image Gallery

image gallery

Matrix

matrix

7 Javascript-effect Alternatives Using CSS3

javascript effect alternatives

Image Hover Effects

css3 clock

Turning Coke Can (Control With Scrollbar)

coke can

3D Meninas

3d meninas

Polaroid Gallery

polaroid gallery

Space

Note: this one is graphic intense and takes a while to load, but the result is crazy!

space

Mac Dock

css3 clock

Drop-In Modals

drop in modals

Zooming Polaroids

zooming polaroids

Animated Rocket

animated rocket

Poster Circle

poster circle

Morphing Cubes

morphing cubes

Analogue Clock

analogue clock

Falling Leaves

falling leaves

Animated Polaroid Gallery

polaroid gallery

Spotlight Cast Shadow

spotlight cast shadow

Colorful Clock

colorful clock

Lightbox Gallery (Draggable)

css3 clock

Elastic Thumbnail Menu

elastic thumbnail menu

Coverflow

coverflow

Snowflakes

snow

jQuery DJ Hero

dj hero

Dynamic Stacking Cards

stacking cards

Snow Stack (Control With Arrow Keys)

snow stack

Animated Pricing Column

animated pricing column

Slick jQuery Menu

slick jquery menu

CSS3

sticky notes

CSS Tabs Without Javascript

css tabs

Tab Menus Without Javascript

tab menus

SVG Fisheye Menu

fisheye menu

Dynamic Presentation Without Flash

dynamic presentation

Rotating Gallery

rotating gallery

Dropdown Menu

dropdown menu

Frame-by-Frame Animation (Hover to Play)

css3 animation

Another Accordion

another accordion

AT-AT Walker (No Flash or Javascript)

css3 animation walker

Another Fisheye

fisheye

您可能还喜欢

英文链接：47 Amazing CSS3 Animation Demos

编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

本文链接

相关 [css3 应用] 推荐：

9个超酷的 HTML5/CSS3 应用

- - 氪星人
1、HTML5播放器神话，卡带式古典播放器. 这是一款样式非常古典，但又是非常时尚的HTML5播放器，说它是古典播放器，是因为这种卡带式的HTML5播放器比较古老，说它时尚，是因为现在的HTML5播放器很少有这种样式的，非常有创意. 如果你想给你的个人主要添加一款个性化的播放器，那么这款HTML5卡带式古典播放器可以选择一下，个人认为这是HTML5播放器的神话，非常经典.

19个基于 HTML5 和 CSS3 开发的优秀应用程序

- Amo - HTML5研究小组
今天，本文向大家展示19个基于 HTML5 和 CSS3 开发的优秀应用程序. HTML5 可以说是近十年来 Web 标准最巨大的飞跃，它的使命是将 Web 带入一个成熟的应用平台，而 CSS3 同样给 WEB 开发带来了革命性的影响，以前很多需要 JavaScript 实现的复杂效果，现在使用简单的 CSS3 就能实现.

45个非常奇妙的 CSS3 特性应用示例

- zhaoloving - 博客园_首页
这篇文字收集了45个让人觉得不可思议的 CSS3 应用示例，它们验证了 CSS3 Transform 和 Transition 等属性的强大能力. 随着越来越多的浏览器对 CSS3 支持的不断完善，设计师和开发者们有了更多的选择，以前需要使用 JavaScript 才能实现的各种很酷的界面效果和动画，如今使用纯 CSS 代码就可以很容易实现.

推荐6款优秀的jQuery/CSS3应用插件

- - CSDN博客推荐文章
jQuery是一款非常轻巧优秀的JS类库，CSS3又可以十分方便地制作各种绚丽的网页效果，那么如果把jQuery的轻巧和CSS3的绚丽结合起来，相信一定会给网页添加不少精彩. 下面搜集了几款非常出色的jQuery/CSS3应用插件，每一款都提供在线演示和源码下载，喜欢的朋友赶紧收藏吧. 1、jQuery/CSS3动画Tab菜单.

分享9款最新超酷HTML5/CSS3应用插件

- - HTML5资源教程
新的一周开始了，小编继续要为大家分享实用超酷的HTML5应用，今天分享的这9款最新HTML5/CSS3应用你一定会很喜欢，一起来看看. 1、HTML5 Canvas模拟衣服撕扯动画 超级逼真. 今天又要来推荐一款HTML5 Canvas动画，是一个模拟衣服撕扯动画，效果非常逼真. 刚开始衣服挂在绳子上，用鼠标拖拽衣服即可让衣服摆动起来，当你拖拽的很用力时，你会发现，衣服被撕破了.

TideSDK：使用 HTML5, CSS3 和 JavaScript 创建多平台的桌面应用

- - 我爱水煮鱼
TideSDK 是一个使用 Web 技术（HTML5，CSS3 和 JavaScript）创建桌面应用的开源开发框架. 通过 TideSDK 创建的应用可以覆盖所有主流的操作系统（Windows，Mac OX，Linux），并且服务器端可支持 PHP，Python，Ruby 等绝大部分服务器端语言.

css3 变形

- - 博客园_Ruby's Louvre
CSS3从IE滤镜偷窍过来的创意，但易用性明显提高了许多. 利用这个，我们可以对某个元素进行旋传，缩放，倾斜与位移，并且区分元素类型，无论对块状元素还是内联元素都有效. rotateX(angle) 单独设定 rX 轴的角度. rotateY(angle) 单独设定 rY 轴的角度. rotateZ(angle) 单独设定 rZ 轴的角度.

CSS3 代码生成工具：Create CSS3

- - 我爱水煮鱼
CSS3 具有相当多的新增属性，而且包括阴影、动画、过渡等华丽的效果. 但是由于 CSS3 出来并没有很久，各个浏览器厂商还在开发中，有些属性仍然会带有实验性前缀. 而且类似制作动画、渐变的 CSS3 代码也相当复杂，一旦写错就会导致出现问题. 为此，有人开发了一个生成 CSS3 代码的工具 Create CSS3.

CSS3 文字渐变

- slackware - 前端观察
之前，我们有发表过CSS文字渐变效果，但是其实那并不是纯粹的基于CSS的渐变，它需要一张半透明渐变的png图片. 今天我们将介绍两种使用CSS3实现实现文字的方法. 嗯，只有webkit浏览器支持，请暂时无视其它浏览器. 在《CSS的未来：一些试验性CSS属性》中，我们提到了这个属性，相对于Firefox只能用svg做mask，webkit则灵活很多，图片和css3渐变均可.

用css3写个logo

- 丸子 - 崔凯,前端开发
演示地址：http://uicss.cn/css3/maxthon-logo.html. 先画一个外框 width: 240px; height: 240px;border-radius: 120px;. 填充背景色background:#b1e4ff;. 描边border:2px solid #789cb6;.