九个HTML5/CSS3/SVG技术精品演示

看完上面的这些作品,我相信你一定会敬佩这些出色的WEB程序员,用简单的技术就能创作出丰富、动态、交互性良好的WEB作品。同时,我们更加对WEB前端技术——HTML5、CSS3和SVG充满了希望的憧憬。

NetSmell 出品

相对于本地应用程序,浏览器端开发总是受制于各种各样的限制,但天才的WEB程序员总是通过自己的聪明才智,将Web应用的范围不断的推向极致,WEB应用在client端的表现丝毫不输于本地应用。

这都要感谢技术的进步:HTML5、CSS3、Canvas,以及WebGL。下面是几个精彩的利用上面这些技术实现的不可思议效果的演示。

这些作品都可以在Codepen网站上找到。Codepen是一个提供WEB前端创作寄存和展示的好地方。

玩电脑游戏的孩子

这是一个具有3D视效的作品,使用了three.js脚本库,它和用户还具有交互功能,你可以使用鼠标拖拽屏幕,让整个3D模型旋转。其中的电视机里显示的内容是一个MP4视频,你会发现这个电视的画面也是3D的。如果这个演示放到一个https的安全域上,并且开启摄像头,你的影像将会替换电视机里显示的内容,神奇吧!

纯CSS制作的立方旋转画体

很重要的一点就是,这个演示是用纯CSS3+html5制作的,没有使用任何的js。还有一点,你会看到这个立方体有一个模糊的影子,效果非常好:

HTML5魔方

这是一个用HTML5+CSS3+js制作的魔方,用鼠标拖拽页面任何地方,可以让魔方旋转。拖拽魔方上的方块,可以自由拧转魔方。请注意:魔方的中间一层是无法转动的,就跟你玩真实的魔方一样。

SVG作品:外星飞碟猎捕地球生物

这是一个非常有趣的SVG动画作品,动画过程非常的滑顺,而且具有一点小情节,非常的生动。

纯CSS3重现漫威动画片头

看过漫威电影(比如蜘蛛侠)的朋友们一定见过电影播放前的片头。那么,这个演示就是用纯CSS技术完整逼真的重现了这个片头效果。非常精彩。

SVG作品:一匹飞奔的狼

这个神奇的作品没有使用任何的CSS技术和JavaScript技术,只是一个SVG文件。这匹狼奔跑起来非常具体动感。

礼花喷花器

这个作品中你会发现色彩缤纷的纸片运动的轨迹非常的顺滑,并且纸片运动的加速/减速控制的非常优秀,而且,当纸片数量增加时,对性能的影响也非常的小。

飞行爱好者

本作品是和上面那个玩电玩的孩子是同一个作者,这个演示中作者创作了一个3D的小岛,风景很美,有云漂浮在空中,有闪电,飞机在云层中飞来飞去。同样,你可以用鼠标在画面上拖拽,转动整个3D模型。

印度杂耍艺人

这个作品主要是使用了一些图片,你可以拖拽这些图片,可以看到作者对力度和弹性的控制非常的出色。整个作品风格很有印度特色。

看完上面的这些作品,我相信你一定会敬佩这些出色的WEB程序员,用简单的技术就能创作出丰富、动态、交互性良好的WEB作品。同时,我们更加对WEB前端技术——HTML5、CSS3和SVG充满了希望的憧憬。

显示余下内容
相关文章:
  1. 在网页中使用SVG技术
  2. CSS3动画代码关键片段大集合
  3. HTML 5.1来了!9月份正式发布
  4. W3C即将发布HTML 5.1:HTML 5.2的准备工作也已开始
  5. 漂亮变换的CSS3图标
  6. 用纯CSS3绘制26个英文字母
  7. 法国开源软件公司 Nexedi 起诉苹果扼杀 HTML5
  8. 一个DIV的CSS艺术
  9. 谷歌将在年底完成 Adobe Flash 到 HTML5 的转移
  10. SVG中的viewBox和preserveAspectRatio用法
 

发表评论

您的电子邮箱地址不会被公开。