设为首页收藏本站

亚洲数据论坛

 找回密码
 立即注册

扫一扫,访问微社区

QQ登录

只需一步,快速开始

查看: 1122|回复: 5

【资源】 精选现代网页技术作品赏析

[复制链接]

577

主题

765

帖子

15

精华

Rank: 7Rank: 7Rank: 7

积分
3869
1869 枚
0 枚
2 枚
发表于 2015-9-1 17:52:11 | 显示全部楼层 |阅读模式
本帖最后由 勇敢的心 于 2015-9-1 18:06 编辑

推荐使用 IE9+、Opera、Firefox、Chrome、Safari 等最新版现代浏览器预览,以获最佳演示效果.

一. 中文版濒危动物CSS碎片拼图


这里我们用纯CSS技术表现出30种动物的碎片拼图形象,这30动物,非常的可爱,但不幸的是,它们都是濒临灭绝的动物,它们的生存情况正面临着危机。


精选现代网页技术作品赏析 - 中文版濒危动物CSS碎片拼图

精选现代网页技术作品赏析 - 中文版濒危动物CSS碎片拼图


二. 纯CSS3技术实现的加载动画


你能相信吗?这些都是由一个DIV元素实现的动画,纯CSS3技术。


CSS3给Web程序猿提供了无限发挥的创造空间,以前只有视频、Flash、JavaScript才能实现的动画效果,如今只需要纯CSS+HTML就能做到。你能相信吗?这里呈现的所有动画,都是由一个DIV元素实现,纯CSS3技术。


精选现代网页技术作品赏析 - 纯CSS3技术实现的加载动画

精选现代网页技术作品赏析 - 纯CSS3技术实现的加载动画


三. HTML5+CSS3特效幻灯片(impress.js)


HTML5和CSS3的诞生和普及必将对传统行业带来巨大的冲击,像微软PPT这样的软件必将慢慢转移的在线的HTML5+CSS3上,因为用HTML5+CSS3实现幻灯片不仅更简单、容易,而且功能更强调,特效更绚丽。impress.js就是这样一款可以让你轻松利用CSS3动画实现具有神奇特效的幻灯片工具。


精选现代网页技术作品赏析 - HTML5+CSS3特效幻灯片(impress.js)

精选现代网页技术作品赏析 - HTML5+CSS3特效幻灯片(impress.js)


四. CSS3超链接特效


这里提供了各种各样的超链接特性,有些是借助伪元素,有些是借助svg,有些是借助HTML5动画。用你的鼠标悬停在这些链接上,给你跟传统链接完全不一样的效果感觉。同样,你需要使用现代浏览器,比如谷歌浏览器或火狐浏览器。


精选现代网页技术作品赏析 - CSS3超链接特效

精选现代网页技术作品赏析 - CSS3超链接特效


五. CSS3抖动特效


在一个大型项目里我需要制作出抖动的效果。最初我使用的是普通的CSS。当开发完成后,我发现了这个很酷的jQuery plugin(由@jackrugile开发)。于是我就开始思考,我应该做出这个小的CSS project。


精选现代网页技术作品赏析 - CSS3抖动特效

精选现代网页技术作品赏析 - CSS3抖动特效


六. HTML5技术秀:你的3D立体旋转名字


这是一个很酷的HTML5技术应用,用户可以在画布上用画笔写出自己想看的文字或图案,这个应该能将你写的东西用3D方式呈现,而且让它围着中心3D旋转,只要你设计的巧妙,你可以绘制出让人惊叹的效果和图案。


精选现代网页技术作品赏析 - HTML5技术秀:你的3D立体旋转名字

精选现代网页技术作品赏析 - HTML5技术秀:你的3D立体旋转名字


七. 一个内衣公司用HTML5制作的公益游戏:让爱做主


这是一个生产内衣的公司使用HTML5技术制作的公益游戏。曾获得Cutting Edge技术奖。游戏的主旨是反对印度国内存在的包办婚姻现象。内衣公司的游戏非常有内衣特色。但游戏中使用的技术还是让人佩服的,纯HTML5+JS,整个游戏有很好的互动性,值得游戏设计者学习。


精选现代网页技术作品赏析 - 一个内衣公司用HTML5制作的公益游戏:让爱做主 ... ...

精选现代网页技术作品赏析 - 一个内衣公司用HTML5制作的公益游戏:让爱做主 ... ...


八. 程序猿给女朋友用HTML5制作的3D相册


程序猿给女朋友用HTML5制作的3D相册,使用鼠标拖拽,能看到3D旋转效果,点击相片,相片能放大,移近。程序猿发挥自己的专长,这是那些不懂编程的人望尘莫及的。本相册使用了HTML5的画布技术,需要谷歌浏览器或火狐浏览器等现代浏览器才能正常观看。


精选现代网页技术作品赏析 - 程序员给女朋友用HTML5制作的3D相册

精选现代网页技术作品赏析 - 程序员给女朋友用HTML5制作的3D相册


九. 现代网页技术:一本书里的大千世界


如果当你翻开一本书的时候,里面飞出来一只蝙蝠,或是一条会喷火的龙,你会有什么感觉?惊奇!赞叹!目瞪口呆!我想到了电影《哈利波特》里的那份会动的报纸。这里将会给你带来一种类似的奇观——一本书里的大千世界。随着浏览器技术的不断革新,越来越多的可能成为了现实。这里就是现代网页技术的典型代表。


精选现代网页技术作品赏析 - 现代网页技术:一本书里的大千世界

精选现代网页技术作品赏析 - 现代网页技术:一本书里的大千世界


十. 超级酷炫的HTML5互动式程序猿求职简历


程序猿的求职简历应该体现出程序猿的技术能力,但几乎所有的简历都是用文字表述的,为什么让简历载体自身成为体现程序猿技能的平台呢?如果你还不明白我说的是什么意思,那就看看这个超级酷炫的HTML5互动式程序猿求职简历,一定会让你惊异不已。


精选现代网页技术作品赏析 - 超级酷炫的HTML5互动式程序员求职简历

精选现代网页技术作品赏析 - 超级酷炫的HTML5互动式程序员求职简历


十一. HTML5配乐漫画:霹雳娇娃


HTML5技术的发展、浏览器技术的进步,不仅给程序猿带来了福祉,而且给漫画爱好者带来了新的体验和享受,HTML5技术的革新使得配乐情景漫画的制作变得十分容易,并且给漫画赋予了交互性。欣赏这样的一本漫画作品绝对是一种超值的享受。注意情节中的配音,请开大音量获得最佳效果。


精选现代网页技术作品赏析 - HTML5配乐漫画:霹雳娇娃

精选现代网页技术作品赏析 - HTML5配乐漫画:霹雳娇娃


十二. CSS技术秀:三维视差效果出神表现阴霾的海湾


翻滚的海面,摇摇欲坠的灯塔,密布的乌云,暴风雨中的海燕。在加上CSS三维视差效果,虽是童话的世界,但亦真亦幻,令人神往。本作品是使用轻量级的js视差效果引擎parallax.js实现。在智能移动设备上效果更佳。


精选现代网页技术作品赏析 - CSS技术秀:三维视差效果出神表现阴霾的海湾

精选现代网页技术作品赏析 - CSS技术秀:三维视差效果出神表现阴霾的海湾


十三. WebGL技术精品(1):水母


如果你能想象出在光线充足的海里拍摄一群水母游动样子,那这里用WebGL技术实现的水母游动的效果绝对会让你以为是一段真实拍摄的视频。不能不佩服作者的技术高超。


Tips:使用最新的谷歌浏览器或火狐浏览器能获得最佳演示效果;本演示需要你的电脑有一个相当不错的显卡和最新的显卡驱动;拖拽屏幕有旋转效果。


精选现代网页技术作品赏析 - WebGL技术精品(1):水母

精选现代网页技术作品赏析 - WebGL技术精品(1):水母


十四. WebGL技术精品(2):水池、水和球


使用浏览器里的WebGL技术逼真模拟水池、水、球、光影的互动变化效果。本演示需要你的电脑有一个相当不错的显卡和最新的显卡驱动。互动效果有:点击水面激起波澜,拖拽页面来旋转视角,使用G键来翻转重力,等等...


精选现代网页技术作品赏析 - WebGL技术精品(2):水池、水和球

精选现代网页技术作品赏析 - WebGL技术精品(2):水池、水和球


十五. 纯CSS3制作的动画鱼缸景观


不是视频,不是flash,没有用Javascript,没有用HTML5 Canvas,没有用一张图片,所有的鱼、水、石、怪以及动画效果都是用纯CSS3画出来的,真正叫人佩服的五体投地。


精选现代网页技术作品赏析 - 纯CSS3制作的动画鱼缸景观

精选现代网页技术作品赏析 - 纯CSS3制作的动画鱼缸景观


十六. 谷歌浏览器体验项目:HTML5画布(Canvas)技术应用演示——手势控制幻灯片播放


这是作者将基于网络摄像头的手势识别技术和Hakim El Hattab开发reveal.js融合到一起的研究成果。花费了很长时间开发和优化调整这个手势识别算法。即使如此,这个算法仍然只有大概80%的准确性。但相信它已经足够让你领略到这种技术的潜力了。


精选现代网页技术作品赏析 - 谷歌浏览器体验项目:HTML5画布(Canvas)技术应用演示——手势控制幻灯片播放 . ...

精选现代网页技术作品赏析 - 谷歌浏览器体验项目:HTML5画布(Canvas)技术应用演示——手势控制幻灯片播放 . ...




亚洲数据论坛 - 作者版权声明分割线

Respect for the original creation of the hard, the author of : webhek  In this thanks!



是失败让我乐观;
是快乐让我冷静.
因为我有一颗和你一样勇敢的心!

0

主题

125

帖子

0

精华

Rank: 2

积分
291
291 枚
0 枚
0 枚
QQ
发表于 2015-9-5 12:48:09 | 显示全部楼层
技术手还是很让人膜拜的
Welcome to the Asian data center forum, I wish you all the best!

577

主题

765

帖子

15

精华

Rank: 7Rank: 7Rank: 7

积分
3869
1869 枚
0 枚
2 枚
 楼主| 发表于 2015-9-5 16:31:45 | 显示全部楼层
李洁 发表于 2015-9-5 12:48
技术手还是很让人膜拜的

膜拜+1

是失败让我乐观;
是快乐让我冷静.
因为我有一颗和你一样勇敢的心!

3

主题

75

帖子

0

精华

Rank: 1

积分
141
141 枚
0 枚
0 枚
发表于 2015-10-20 11:12:47 | 显示全部楼层
我和我的小伙伴都惊呆了!
Welcome to the Asian data center forum, I wish you all the best!

577

主题

765

帖子

15

精华

Rank: 7Rank: 7Rank: 7

积分
3869
1869 枚
0 枚
2 枚
 楼主| 发表于 2015-10-20 11:33:31 | 显示全部楼层
wangxp 发表于 2015-10-20 11:12
我和我的小伙伴都惊呆了!

  难得你有时间过来. ^_^

是失败让我乐观;
是快乐让我冷静.
因为我有一颗和你一样勇敢的心!

3

主题

75

帖子

0

精华

Rank: 1

积分
141
141 枚
0 枚
0 枚
发表于 2015-10-21 11:02:42 | 显示全部楼层
勇敢的心 发表于 2015-10-20 11:33
  难得你有时间过来. ^_^

最近每天加班,所以很少来
【osblog 程序员博客】专注于Java web开发、Web前端技术以及Html5博客模板分享。
支持支持 高兴高兴 淡定淡定 惊呆了惊呆了 给力给力 回帖回帖 生气生气 感谢感谢 路过路过
自动排版 | 高级模式
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|小黑屋|手机版|Archiver|站点地图|亚洲数据论坛   

GMT+8, 2017-11-22 19:46

©2009-Infinity  Data Forum Asia

快速回复 返回顶部 返回列表