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实现波纹特效、H5实现动态波浪效果
Jan 31 HTML / CSS
CSS3中线性颜色渐变的一些实现方法
Jul 14 HTML / CSS
如何开发一款堪比APP的微信小程序(腾讯内部团队分享)
Dec 22 HTML / CSS
html5本地存储_动力节点Java学院整理
Jul 12 HTML / CSS
html5文本内容_动力节点Java学院整理
Jul 11 HTML / CSS
HTML5 Geolocation API的正确使用方法
Dec 04 HTML / CSS
html5中地理位置定位api接口开发应用小结
Jan 04 HTML / CSS
利用HTML5实现使用按钮控制背景音乐开关
Sep 21 HTML / CSS
Html5实现二维码扫描并解析
Jan 20 HTML / CSS
iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配
Apr 08 HTML / CSS
CSS3实现三角形不断放大效果
Apr 13 HTML / CSS
CSS+HTML 实现顶部导航栏功能
Aug 30 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 DataGrid 实现代码
2009/08/12 PHP
对于Laravel 5.5核心架构的深入理解
2018/02/22 PHP
js 固定悬浮效果实现思路代码
2013/08/02 Javascript
JQuery动画animate的stop方法使用详解
2014/05/09 Javascript
javascript实现禁止鼠标滚轮事件
2015/07/24 Javascript
RequireJS入门一之实现第一个例子
2015/09/30 Javascript
使用JQuery实现Ctrl+Enter提交表单的方法
2015/10/22 Javascript
js获取及修改网页背景色和字体色的方法
2015/12/29 Javascript
基于javascript实现泡泡大冒险网页版小游戏
2016/03/23 Javascript
Jquery on方法绑定事件后执行多次的解决方法
2016/06/02 Javascript
微信小程序实现缓存根据不同的id来进行设置和读取缓存
2017/06/12 Javascript
AngularJS遍历获取数组元素的方法示例
2017/11/11 Javascript
vue如何通过id从列表页跳转到对应的详情页
2018/05/01 Javascript
微信小程序中上传图片并进行压缩的实现代码
2018/08/28 Javascript
react项目如何使用iconfont的方法步骤
2019/03/13 Javascript
Vue js 的生命周期(看了就懂)(推荐)
2019/03/29 Javascript
基于Echarts图表在div动态切换时不显示的解决方式
2020/07/20 Javascript
[01:08:29]DOTA2-DPC中国联赛定级赛 RNG vs Aster BO3第一场 1月9日
2021/03/11 DOTA
Python中使用PyHook监听鼠标和键盘事件实例
2014/07/18 Python
python通过正则查找微博@(at)用户的方法
2015/03/13 Python
python 读取视频,处理后,实时计算帧数fps的方法
2018/07/10 Python
PyQT5 QTableView显示绑定数据的实例详解
2019/06/25 Python
Pandas之Dropna滤除缺失数据的实现方法
2019/06/25 Python
Django后端发送小程序微信模板消息示例(服务通知)
2019/12/17 Python
Python类的动态绑定实现原理
2020/03/21 Python
浅谈Python 命令行参数argparse写入图片路径操作
2020/07/12 Python
HTML5的标签的代码的简单介绍 HTML5标签的简介
2012/05/28 HTML / CSS
巴西葡萄酒商店:Divvino
2020/02/22 全球购物
娇韵诗俄罗斯官方网站:Clarins俄罗斯
2020/10/03 全球购物
市场营销专业毕业生求职信
2014/03/26 职场文书
建设幸福中国演讲稿
2014/09/11 职场文书
教师群众路线教育实践活动个人对照检查材料
2014/11/04 职场文书
2015感人爱情寄语
2015/02/26 职场文书
重温经典:乔布斯在斯坦福大学的毕业演讲(双语)
2019/08/26 职场文书
JS Canvas接口和动画效果大全
2021/04/29 Javascript
基于Redis实现分布式锁的方法(lua脚本版)
2021/05/12 Redis