前端之美:9个很酷的基于 CSS3 和 JavaScript 实现的效果

简介:   这篇文章向大家分享9个很酷的挑选自 DemoStudio 的 CSS3 和 JavaScript 实现的精美效果。DemoStudio 是 Mozilla Developer Network(MDN)用于展示一些非常优秀的 CSS3 和 JavaScript 效果的网站,Google 也有一个 Chrome Experiment,用于展示最新的 Web 技术应用。

  这篇文章向大家分享9个很酷的挑选自 DemoStudio 的 CSS3 和 JavaScript 实现的精美效果。DemoStudio 是 Mozilla Developer Network(MDN)用于展示一些非常优秀的 CSS3JavaScript 效果的网站,Google 也有一个 Chrome Experiment,用于展示最新的 Web 技术应用。相信下面展示的这些效果会给你留下非常深刻的印象,让你体会到Web的美妙!

 

3D Image transition

3D Image transition

艳丽的图片,可以和 Flash 媲美的 3D CSS3 Transition 效果。

 

Paperfold

Paperfold

让人眼前一亮的折纸效果,可拖动控制选项变换各种效果。

 

RotorJS

RotorJS

基于 JavaScript 实现的一个轻量、可扩展的3D旋转控制库。 

 

The Box

The Box

使用硬纸片制作的动态的 3D 场景,使用可回收材料制作。

 

3D Flip list menu

3D Flip list menu

带翻转效果的二级导航菜单,鼠标悬浮即可看到效果。

 

CSS3 Reflection effect

CSS3 Reflection effect

使用 CSS3 实现的倒影效果,惊叹吧!

 

Animated Menu Icons

Animated Menu Icons

使用纯 CSS3 实现的微型,可伸缩的动画效果。

 

Animated CSS3 Gallery

Animated CSS3 Gallery

基于 CSS3 的相册,带有旋转和渐显缩放效果。

 

The CSS Book

The CSS Book

使用 CSS 实现的 3D 书本效果,拖动鼠标试用一下吧。

  

您可能还喜欢

 

 

英文链接:9 Awesome CSS3 And Javascript Effects

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

作者:山边小溪
主站:yyyweb.com 记住啦:)
欢迎任何形式的转载,但请务必注明出处。

相关文章
|
19天前
|
缓存 前端开发
前端代码整洁与规范之CSS篇
【4月更文挑战第2天】 前端代码整洁与规范之CSS篇
36 4
|
6天前
|
JavaScript 前端开发 iOS开发
js实用方法记录-动态加载css/js
js实用方法记录-动态加载css/js
11 0
|
8天前
|
移动开发 前端开发 JavaScript
CSS选择器 前端开发入门笔记(十)
CSS选择器 前端开发入门笔记(十)
17 1
|
8天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
18 1
|
11天前
|
前端开发 JavaScript 搜索推荐
CSS框架是前端开发中不可或缺的工具
【4月更文挑战第12天】CSS框架是前端开发中不可或缺的工具
18 2
|
14天前
|
JSON JavaScript 前端开发
js是什么、html、css
js是什么、html、css
|
20天前
|
人工智能 前端开发 JavaScript
【前端设计】HTML+CSS+JavaScript基本特性
【前端设计】HTML+CSS+JavaScript基本特性
|
1月前
|
JavaScript
JS+CSS3点击粒子烟花动画js特效
JS+CSS3点击粒子烟花动画js特效
12 0
JS+CSS3点击粒子烟花动画js特效
|
JavaScript 前端开发 区块链