开发者社区> 秋天风景> 正文

前端之美: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 记住啦:)
欢迎任何形式的转载,但请务必注明出处。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
利用JavaScript实现二级联动
利用JavaScript实现二级联动 要实现JavaScript二级联动效果,首先要确定需要哪些技术: 二维数组 for in循环 new Option(text,value,true,true) add(option,null) onchange() 表单事件 HTML代码: <!-- <input type="text" id="text"> --> 请选择省份: <select name="" id="provinces"> <!-- <option value="江苏省">江苏省</option>
51 0
JavaScript函数柯里化的实现原理,进来教你完成一个自己的自动实现柯里化方法
JavaScript函数柯里化的实现原理,进来教你完成一个自己的自动实现柯里化方法
47 0
weex-自定义module,实现weex在iOS的本地化,js之间互相跳转,交互,传值(iOS接入weex的最佳方式)
weex-自定义module,实现weex在iOS的本地化,js之间互相跳转,交互,传值(iOS接入weex的最佳方式)
65 0
JS中实现或退出全屏
JS中实现或退出全屏
62 0
前端:JS实现双击table单元格变为可编辑状态
前端:JS实现双击table单元格变为可编辑状态
99 0
【前端算法】JS实现数字千分位格式化
JS实现数字千分位格式化的几种思路,以及它们之间的性能比较
60 0
【前端算法】用JS实现快速排序
理解数组方法里面运用到的算法,splice 和 slice的区别
26 0
【前端算法】javaScript实现二分查找
如何使用JS实现一个合格的二分查找
43 0
一行代码解决LeetCode实现 strStr()使用JavaScript解题|前端学算法
一行代码解决LeetCode实现 strStr()使用JavaScript解题|前端学算法
40 0
+关注
秋天风景
既然选择了远方,便只顾风雨兼程。
文章
问答
文章排行榜
最热
最新
相关电子书
更多
Javascript中的函数
立即下载
Javascript异步编程
立即下载
JS零基础入门教程(上册)
立即下载