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 background-clip,background-origin和border-image教程
Jan 27 HTML / CSS
CSS3实现王者匹配时的粒子动画效果
Apr 12 HTML / CSS
CSS3属性 line-clamp控制文本行数的使用
Mar 19 HTML / CSS
详解HTML5新增标签
Nov 27 HTML / CSS
html5使用canvas实现图片下载功能的示例代码
Aug 26 HTML / CSS
HTML5 CSS3新的WEB标准和浏览器支持
Jul 16 HTML / CSS
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
Dec 13 HTML / CSS
html5 Canvas实现图片旋转的示例
Jan 15 HTML / CSS
html5 datalist 选中option选项后的触发事件
Mar 05 HTML / CSS
Html5之webcoekt播放JPEG图片流
Sep 22 HTML / CSS
纯html+css实现打字效果
Aug 02 HTML / CSS
CSS文本阴影 text-shadow 悬停效果详解
May 25 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
php 删除记录实现代码
2009/03/12 PHP
thinkphp判断访客为手机端或PC端的方法
2014/11/24 PHP
php使用sql server验证连接数据库的方法
2014/12/25 PHP
PHP获取网站中各文章的第一张图片的代码示例
2016/05/20 PHP
PHP简单实现二维数组赋值与遍历功能示例
2017/10/19 PHP
php中关于换行的实例写法
2019/09/26 PHP
Ext 今日学习总结
2010/09/19 Javascript
jquery实现触发时更新下拉列表内容的方法
2015/12/02 Javascript
关于session和cookie的简单理解
2016/06/08 Javascript
jQuery的ajax下载blob文件
2016/07/21 Javascript
详解Angular中的自定义服务Service、Provider以及Factory
2017/04/22 Javascript
js学习总结之DOM2兼容处理顺序问题的解决方法
2017/07/27 Javascript
浅谈关于.vue文件中style的scoped属性
2017/08/19 Javascript
使用InstantClick.js让页面提前加载200ms
2017/09/12 Javascript
vue项目动态设置页面title及是否缓存页面的问题
2018/11/08 Javascript
解决vue组件props传值对象获取不到的问题
2019/06/06 Javascript
Python入门之三角函数全解【收藏】
2017/11/08 Python
python打包压缩、读取指定目录下的指定类型文件
2018/04/12 Python
selenium设置proxy、headers的方法(phantomjs、Chrome、Firefox)
2018/11/29 Python
如何利用Anaconda配置简单的Python环境
2019/06/24 Python
Python读写文件模式和文件对象方法实例详解
2019/09/17 Python
python 生成器和迭代器的原理解析
2019/10/12 Python
tensorflow中tf.slice和tf.gather切片函数的使用
2020/01/19 Python
Python3将ipa包中的文件按大小排序
2020/04/17 Python
win7上tensorflow2.2.0安装成功 引用DLL load failed时找不到指定模块 tensorflow has no attribute xxx 解决方法
2020/05/20 Python
css3实现文字扫光渐变动画效果的示例
2017/11/07 HTML / CSS
CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码
2021/02/24 HTML / CSS
荷兰手表网站:Watch2Day
2018/07/02 全球购物
Amcal中文官网:澳洲综合性连锁药房
2019/03/28 全球购物
德国滑雪和户外用品网上商店:XSPO
2019/10/30 全球购物
日语专业毕业生自荐信
2013/11/11 职场文书
运动会开幕式邀请函
2014/02/03 职场文书
小学生国庆节演讲稿
2014/09/05 职场文书
防卫过当辩护词
2015/05/21 职场文书
导游词之白茶谷九龙峡
2019/10/23 职场文书
JS如何实现基于websocket的多端桥接平台
2021/05/14 Javascript