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


Posted in HTML / CSS onJanuary 01, 2012

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

CSS3 Clock With jQuery

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

Another Image Gallery

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

Sliding Vinyl

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

3D Cube That Rotates Using Arrow Keys

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

Multiple 3D Cubes (Slide In/Out)

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

CSS3 Accordion

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

Auto-Scrolling Parallax

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

Isocube

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

Image Gallery

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

Matrix

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

7 Javascript-effect Alternatives Using CSS3

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

Image Hover Effects

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

Turning Coke Can (Control With Scrollbar)

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

3D Meninas

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

Polaroid Gallery

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

Space

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

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

Mac Dock

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

Drop-In Modals

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

Zooming Polaroids

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

Animated Rocket

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

Poster Circle

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

Morphing Cubes

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

Analogue Clock

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

Falling Leaves

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

Animated Polaroid Gallery

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

Spotlight Cast Shadow

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

Colorful Clock

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

Lightbox Gallery (Draggable)

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

Elastic Thumbnail Menu

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

Coverflow

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

Snowflakes

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

jQuery DJ Hero

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

Dynamic Stacking Cards

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

Snow Stack (Control With Arrow Keys)

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

Animated Pricing Column

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

Slick jQuery Menu

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

CSS3

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

CSS Tabs Without Javascript

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

Tab Menus Without Javascript

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

SVG Fisheye Menu

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

Dynamic Presentation Without Flash

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

Rotating Gallery

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

Dropdown Menu

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

Frame-by-Frame Animation (Hover to Play)

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

Another Accordion

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

AT-AT Walker (No Flash or Javascript)

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

Another Fisheye

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

HTML / CSS 相关文章推荐
CSS3实现类似翻书效果的过渡动画的示例代码
Sep 06 HTML / CSS
CSS3对背景图片的裁剪及尺寸和位置的设定方法
Mar 07 HTML / CSS
实例讲解CSS3中Transform的perspective属性的用法
Apr 22 HTML / CSS
纯CSS3绘制打火机动画火焰效果
Jul 18 HTML / CSS
CSS3实现同时执行倾斜和旋转的动画效果
Oct 27 HTML / CSS
详解CSS3:overflow属性
Nov 17 HTML / CSS
HTML5对手机页面长按会粘贴复制禁用的解决方法
Jul 19 HTML / CSS
HTML5边玩边学(2)基础绘图实现方法
Sep 21 HTML / CSS
HTML5 Canvas 绘图——使用 Canvas 绘制图形图文教程 使用html5 canvas 绘制精美的图
Aug 31 HTML / CSS
详解H5 活动页之移动端 REM 布局适配方法
Dec 07 HTML / CSS
HTML5 常见面试题之PC端和移动端区别介绍
Jan 22 HTML / CSS
uniapp+Html5端实现PC端适配
Jul 15 HTML / CSS
让IE6支持css3,让 IE7、IE8 都支持CSS3
Oct 09 #HTML / CSS
利用CSS3的transform做的动态时钟效果
Sep 21 #HTML / CSS
CSS3 border-image详解、应用及jQuery插件
Aug 29 #HTML / CSS
CSS3 特效范例整理
Aug 22 #HTML / CSS
你正在寻找的CSS3 动画技术
Jul 27 #HTML / CSS
IE兼容css3圆角的实现代码
Jul 21 #HTML / CSS
10个很棒的 CSS3 开发工具 推荐
May 16 #HTML / CSS
You might like
不用数据库的多用户文件自由上传投票系统(1)
2006/10/09 PHP
深入php常用函数的使用汇总
2013/06/08 PHP
PHP标准库 (SPL)――Countable用法示例
2020/06/05 PHP
WEB页子窗口(showModalDialog和showModelessDialog)使用说明
2009/10/25 Javascript
不同Jquery版本引发的问题解决
2013/10/14 Javascript
Node.js模拟浏览器文件上传示例
2014/03/26 Javascript
javascript定义变量时带var与不带var的区别分析
2015/01/12 Javascript
JavaScript中反正弦函数Math.asin()的使用简介
2015/06/14 Javascript
详解jQuery移动页面开发中的ui-grid网格布局使用
2015/12/03 Javascript
百度坐标(BD09)、国测局坐标(火星坐标,GCJ02)、和WGS84坐标系之间的转换
2016/02/19 Javascript
AngularJS Bootstrap详细介绍及实例代码
2016/07/28 Javascript
ionic组件ion-tabs选项卡切换效果实例
2016/08/27 Javascript
JavaScript算法系列之快速排序(Quicksort)算法实例详解
2016/09/04 Javascript
AngularJS 过滤与排序详解及实例代码
2016/09/14 Javascript
JS仿JQuery选择器功能
2017/03/08 Javascript
从零开始学习Node.js系列教程二:文本提交与显示方法
2017/04/13 Javascript
es6学习笔记之Async函数基本教程
2017/05/11 Javascript
Angularjs自定义指令Directive详解
2017/05/27 Javascript
JavaScript使用递归和循环实现阶乘的实例代码
2018/08/28 Javascript
JavaScript 自定义html元素鼠标右键菜单功能
2019/12/02 Javascript
Python并发编程协程(Coroutine)之Gevent详解
2017/12/27 Python
Python查看微信撤回消息代码
2018/06/07 Python
Python实现求解一元二次方程的方法示例
2018/06/20 Python
推荐10款最受Python开发者欢迎的Python IDE
2018/09/16 Python
Python 获取项目根路径的代码
2019/09/27 Python
python接口自动化如何封装获取常量的类
2019/12/24 Python
Python实现随机生成任意数量车牌号
2020/01/21 Python
python递归函数用法详解
2020/10/26 Python
使用css3匹配手机屏幕横竖状态
2014/01/27 HTML / CSS
Html5剪切板功能的实现代码
2018/06/29 HTML / CSS
HTML5 CSS3实现一个精美VCD包装盒个性幻灯片案例
2014/06/16 HTML / CSS
美国嘻哈文化生活方式品牌:GLD
2018/04/15 全球购物
澳大利亚领先的内衣店:Bendon Lingerie澳大利亚
2020/05/15 全球购物
Java面试笔试题大全
2016/11/23 面试题
信用卡工作证明模板
2014/09/14 职场文书
Nginx解决前端访问资源跨域问题的方法详解
2021/03/31 Servers