分享12个精妙有趣的HTML5应用

简介:   十天前,W3C发布了HTML5的Logo,不过WHATWG随后宣布取消HTML5的版本号,取而代之的是一个活的HTML标准,这个标准会随着新技术的发展而不断更新。其实大家叫HTML5都叫习惯了,我们还是继续叫HTML5好了,只是这个名称的含义仅是用来指最新的HTML技术而已。

  十天前,W3C发布了HTML5的Logo,不过WHATWG随后宣布取消HTML5的版本号,取而代之的是一个活的HTML标准,这个标准会随着新技术的发展而不断更新。其实大家叫HTML5都叫习惯了,我们还是继续叫HTML5好了,只是这个名称的含义仅是用来指最新的HTML技术而已。下面的例子充分展现了HTML5的优越性,希望你能喜欢,更多更精彩的应用正等着大家去实现 :)

The Wilderness Downtown

这个是结合了谷歌地图的应用,用到了HTML5的video和Audio标签,鼠标移动的时候,那些鸟会“智能”的躲开,挺好玩的。

The Wilderness Downtown

Jolicloud

Jolicloud可以帮助你把喜欢的Web应用组织到一起,也可以连接本地的图片、音频、视频等文件,有点像一个Web OS。

img_0630698b4c49ca513d9efe501c6d6b7f.png

Wordmark.it

可以非常方便的查看电脑上安装了哪些字体,并且可以输入文字预览效果。

Wordmark.it

Z-Type

这是一个打字游戏,用到了HTML5中的Canvas和Audio标签。

Ztype game

Nike Better World

这效果太帅了,千万别误认为是Flash做的,实际上是HTML5实现的。

Nike Better World

Klowdz

这是一个绘图应用,发挥你的想象,实在不行,画个神马也可以啊,都是浮云嘛,哈哈。

Klowdz

Canvas Cycle

一个很酷的例子,非常有立体感的画面,可以控制循环的类型,速度,声音,大小等等,赶紧试试。

img_00a70df6efac244985ac2e3cc33a32f5.png

GraphyCalc

使用HTML5开发的三维模型,通过鼠标旋转来实现一个三维效果。

img_c7da2b47518838c32cd002f410807ecd.png

Google Maps + Dynamic Canvas

谷歌地图提供了API可以让你使用HTML5的Canvas来定制一个遮盖层,这个例子激动人心,因为它是我想到的最有用的应用,这个例子显示了所有的伦敦自行车出租点

img_756585aa530c173966c446713a7c2484.png

Darkroom

这个Web应用程序允许你从Flickr等网络服务提取图片,然后使用一些基础但强大的比编辑工具进行编辑并保存。

img_854500c0d5c32d1958acb07f548502f8.png

20 Things

这是一个使用HTML5实现的电子书应用,非常简洁清爽,效果非常流通。

img_df07f5e8bd5fc6c2ad7140d978f2b96a.png

Agent 8-Ball

这是一个使用HTML5技术开发的桌球游戏,设计非常漂亮,帅:)

img_a2d5df72498710d4440dde543e7e68e2.png

Bonus!

苹果也推出了其网站的HTML5版本,苹果相关产品的粉丝估计得有个billion吧。

img_1449469b4dfce9b2d96d6c27be18d831.png

(编译来源:梦想天空  原文来自:12 Fun & Clever Examples of HTML5 

相关文章
|
1月前
|
搜索推荐 定位技术 UED
HTML定位技术:种类、特点与应用
HTML定位技术:种类、特点与应用
|
2月前
|
移动开发 前端开发 HTML5
【基于HTML5的网页设计及应用】——工字型布局
【基于HTML5的网页设计及应用】——工字型布局
86 0
|
2月前
|
移动开发 HTML5 容器
【基于HTML5的网页设计及应用】——固定宽度布局
【基于HTML5的网页设计及应用】——固定宽度布局
35 0
|
2月前
|
移动开发 前端开发 数据安全/隐私保护
【基于HTML5的网页设计及应用】——用户注册
【基于HTML5的网页设计及应用】——用户注册
27 0
|
2月前
|
移动开发 前端开发 HTML5
【基于HTML5的网页设计及应用】——实现个人简历表格和伪类选择器应用
【基于HTML5的网页设计及应用】——实现个人简历表格和伪类选择器应用
59 0
|
15天前
|
存储 JavaScript 数据可视化
vue3+echarts应用——深度遍历html的dom结构并用树图进行可视化
vue3+echarts应用——深度遍历html的dom结构并用树图进行可视化
37 1
|
11天前
|
缓存 移动开发 前端开发
【专栏:HTML与CSS前端技术趋势篇】HTML与CSS在PWA(Progressive Web Apps)中的应用
【4月更文挑战第30天】PWA(Progressive Web Apps)结合现代Web技术,提供接近原生应用的体验。HTML在PWA中构建页面结构和内容,响应式设计、语义化标签、Manifest文件和离线页面的创建都离不开HTML。CSS则用于定制主题样式、实现动画效果、响应式布局和管理字体图标。两者协同工作,保证PWA在不同设备和网络环境下的快速、可靠和一致性体验。随着前端技术进步,HTML与CSS在PWA中的应用将更广泛。
|
11天前
|
前端开发 JavaScript 搜索推荐
【专栏:HTML 与 CSS 前端技术趋势篇】HTML 与 CSS 在 Web 组件化中的应用
【4月更文挑战第30天】本文探讨了HTML和CSS在Web组件化中的应用及其在前端趋势中的重要性。组件化提高了代码复用、维护性和扩展性。HTML提供组件结构,语义化标签增进可读性,支持用户交互;CSS实现样式封装、布局控制和主题定制。案例展示了导航栏、卡片和模态框组件的创建。响应式设计、动态样式、CSS预处理器和Web组件标准等趋势影响HTML/CSS在组件化中的应用。面对兼容性、代码复杂度和性能优化挑战,需采取相应策略。未来,持续发掘HTML和CSS潜力,推动组件化开发创新,提升Web应用体验。
|
11天前
|
编解码 前端开发 UED
【专栏:HTML与CSS实践篇】HTML与CSS在电商网站中的应用
【4月更文挑战第30天】本文探讨了HTML和CSS在电商网站中的关键作用。HTML作为基础结构,定义网页内容和布局,用于页面布局、内容展示和表单处理;而CSS则负责样式设计和美化,包括响应式设计、交互效果和模块化,两者结合创建出功能齐全、视觉吸引力强的在线购物环境,提升用户体验。
|
22天前
|
存储 监控 前端开发
局域网管理软件的前端设计与实现:HTML/CSS在网络拓扑展示中的应用
本文探讨了局域网管理软件的前端设计,强调了HTML/CSS在网络拓扑展示中的作用。通过HTML/CSS创建设备节点和绘制连线,实现清晰的网络设备连接展示。此外,利用JavaScript定时收集监控数据,并通过HTTP请求自动提交到网站,便于管理员进行数据分析,提升了局域网管理效率。
72 3