53个让人震惊的JS+CSS3效果

文章目录

CSS2.x版本使CSS成为Web前端的必备语言,提高了网站的可控制性,同时2.x时代也是一个充满着bug的时代,各个浏览器纷纷登场,没有同一的标准,作为一名Web前端工程师,各种浏览器的hack可以说的如数家珍,现在css3.0的时代到来了,带来了更强的表现能力,同时我想相信一个Web兼容性问题会越来越少的,因为所有的浏览器都在朝着标准靠拢,或许若干年之后就不在会有兼容性问题,今天带来了一些CSS3.0的超炫效果,带你体验CSS3.0的魅力

此外,如果你关注前端,肯定知道HTML5,苹果不支持flash,全力支持HTML5,IE9开始逐渐支持HTML5,火狐,opera最新版也已开始部分支持,谷歌chrome浏览器是目前支持程度最高的,Web将来必定全面进入HTML5,而实际上呢,HTML5实际上并没有多少与HTML有关,它其实就是JavaScript。HTML本身有什么变化?不过一些新标签而已,况且也都很好理解。HTML5的威力在于让你能用JavaScript来创建这些标签。假如没有后台代码通过Canvas来创建动画、游戏,或者通过它来实现一些数据的可视化,这个标签也没有大用处。从浏览器开始支持Canvas开始,我已经看到了Asteroids(行星游戏)的上百个实现,那都是开发人员为熟悉这个新特性所做的练习。有的比较粗糙一些,而有的则极其精美。这些完全都要归功于JavaScript。

下面就请欣赏这些让人震惊的效果吧

1.DeviantART Muro

2. NIzo

nizo

3. Cultural Solutions

culturalsolutions

4. Kasteel Withof

kasteelwithof

5. Solo

solo

6. Intellisult

intellisult

7. Appear

appear

8. Made By Water

madebywater

9. Kurppahosk

kurppahosk

10. Snowden

snowden

11.使用jQuery的CSS3时钟

 

 

12.模拟时钟

 

 

 

13. 另一个CSS3折叠

 

 

 

 

14.多个3D盒子(滑入/滑出)

 

 

15. CSS3折叠

 

 


16. 自动滚动的视差

 

 

17. Isocube

 

 

18.图片画廊

 

 

19. 矩阵

 

 

20. 7个使用CSS3的Javascript效果替代

 

 

 

21. 图片滑过效果

 

 

22. 转动的可乐罐 (通过滚动条控制)

 

 

PS:这个例子和下面这个严格来说都不是用的CSS3技术,而是复杂的图片和css的background-position属性的应用。

23.3D 房间

 

 

24.宝利来画廊

 

 

25. 太空

注意: 这个演示依赖图形,需要一些时间来加载,但是结果非常疯狂!

 

 

26. Mac Dock

 

 

27. 滑入的模态窗口

 

 

28. 滑动的唱片

 

 

29. 放大的宝利来画廊

 

 

30. 动画的火箭

 

 

31. Poster Circle

这个需要支持3D动画的浏览器才能看到全部效果,比如Mac版Safari4浏览器

 

 

32. 变形的盒子

 

 

33. 落叶

 

 

34. 动画效果宝利来画廊

 

 

35. 聚光灯投影

 

 

 

36. 彩色时钟

 

 

37. Lightbox 画廊(可拖拽)

 

 

38. 弹性所略图菜单

 

 

39. Coverflow

 

 

 

40. 另一个Fisheye效果

 

 

 

41.jQuery DJ Hero

 

 

42. 动态的堆叠卡

 

 

43. 另一个图片画廊

 

 

44. 雪栈 (用方向键控制)

 

 

45. 动画的定价分组

 

 

 

46. 光滑的jQuery菜单

 

 

47. CSS3

 

 

48. 不用Javascript的CSS Tabs

 

 

49. 无JavaScript的Tab菜单

 

 

 

50. 逐帧动画(鼠标经过时演示)

 

 

 

 

 

 

51.无Flash的动态演示

 

 

52. 旋转的画廊

 

 

53. 下拉菜单

 

 

原文链接:,转发请注明来源!

发表评论