7款HTML5精美应用教程 让你立即爱上HTML5
你喜欢HTML5吗?我想下面的这7个HTML5应用一定会让你爱上HTML5的,不信就一起来看看吧。
1、HTML5/jQuery雷达动画图表 图表配置十分简单
之前我们介绍过不少形形色色的HTML5图表了,像这款HTML5折线图表Aristochart是一款很不错的折线图表,这款HTML5 Canvas饼状图表也很酷。今天我们再来分享一款很特别的HTML5图表,它是利用HTML5和jQuery的雷达动画图表,图表数据在初始化的时候带有一定动画。

2、HTML5模拟牛顿力学 碰撞的小球
利用HTML5来模拟很多物理实现都非常方便,像之前介绍过的HTML5 Canvas正弦波动画和HTML5物理实验 CSS3模拟齿轮转动。今天我们又要介绍一款HTML5模拟物理实验,这次模拟的是HTML5牛顿力学实验,高空挂几个小球来回摆动,互相撞击,来模拟力的传动。

3、HTML5 Canvas烟花特效 场景十分华丽
对于HTML5技术来说,Canvas应用非常广泛,基本上所有HTML5动画特效都会用到Canvas特性。今天我们要分享一款基于HTML5 Canvas实现的烟花特效,我们只需在黑色的画布上点击鼠标,即会有漂亮的烟花绽放在夜空当中。

4、jQuery轻量级网页编辑器 选中即可编辑
目前流行的可视化网页编辑器非常多,像ckeditor、kindeditor、tinyeditor等,虽然功能都非常强大,但是体积都比较庞大,使用起来也不是很方便。今天我们分享一款基于jQuery的轻量级网页编辑器,它非常轻巧,选中内容即可编辑,非常适合在比较简单的编辑应用中。

5、CSS3手风琴菜单 下拉展开带弹性动画
利用CSS3技术可以实现各种各样的网页菜单,我们之前也在CSS3菜单栏目中分享了许多CSS3菜单。今天我们分享的这款是CSS3手风琴菜单,菜单项在展开和收缩的时候菜单项会有弹性动画效果。每一层父级菜单有一个小三角,菜单项在展开的时候这个小三角也会出现动画,非常酷。

6、HTML5/CSS3 3D环形图片墙 伴随旋转动画
我们分享过很多HTML5图片特效,包括HTML5图片播放、HTML5图片缩放等效果。今天我们要分享一款基于HTML5/CSS3的3D环形图片墙,该HTML5图片特效是一面3D立体的墙,墙上贴着一些图片,墙体在不停的旋转移动。鼠标滑过图片时,图片墙即停止转动,并将选中的图片放大。

7、HTML5 Canvas正弦波动画 可自定义波长和速度
正弦波我们很熟悉,以前数学和物理课上经常会用到,还记得以前物理老师演示的正弦动画还是用flash制作的呢。今天我们要分享的这款HTML5 Canvas动画就和正弦波有关,我们可以稍稍修改一下HTML5代码即可定义波长、频率等正弦波的一些属性,很酷吧。

怎么样,HTML5很给力吧,希望你也能加入HTML5的阵列,欢迎关注@html5tricks获取更多HTML5应用和教程。
本文由html5tricks收集整理,转载请务必保留原文链接
http://www.html5tricks.com/7-html5-app-tutorials.html
7款HTML5精美应用教程 让你立即爱上HTML5的更多相关文章
- 7款HTML5的精美应用教程让你立即爱上HTML5
1,HTML5/jQuery雷达动画图表图表配置十分简单 分享一款很特别的HTML5图表,它是利用HTML5和jQuery的雷达动画图表,图表数据在初始化的时候带有一定动画. 在线演示 源码下载 2, ...
- LayaAir引擎开发HTML5最简单教程(面向JS开发者)
LayaAir引擎开发HTML5最简单教程(面向JS开发者) 一.总结 一句话总结:开发游戏还是得用游戏引擎来开发,其实很简单啦 切记:开发游戏还是得用游戏引擎来开发,其实很简单,引擎很多东西都帮你做 ...
- 教你如何用PS制作多款按钮UI设计教程
教你如何用PS制作多款按钮UI设计教程 本文教大家制作按钮的方法 LV. ★ 初入设计,学做按钮.只会套个底色,加个阴影,字体纯白,小聪明的弄个圆角. LV. ★★(描边.字体.内阴影) 看了很多案例 ...
- [js高手之路] html5 canvas系列教程 - 掌握画直线图形的常用API
我们接着上文[js高手之路] html5 canvase系列教程 - 认识canvas以及基本使用方法继续. 一.直线的绘制 cxt.moveTo( x1, y1 ): 将画笔移动到x1, y1这个点 ...
- [js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具)
之前,我写了一个arc函数的用法:[js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线,弧线,圆形). arcTo: cxt.arcTo( cx, cy, x2, y2, ...
- [js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线,弧线,圆形)
绘制曲线,经常会用到路径的知识,如果你对路径有疑问,可以参考我的这篇文章[js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解. arc:画 ...
- [js高手之路] html5 canvas系列教程 - 图片操作(drawImage,clip,createPattern)
接着上文[js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)继续,本文介绍的 ...
- [js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)
接着上文线条样式[js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)继续. canvas提供两种输出文本的方 ...
- [js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)
上文,写完弧度与贝塞尔曲线[js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具),本文主要是关于线条的样式设置 lineWidth: 设置线条的宽 ...
随机推荐
- 关于Android开发的一些个人总结(2016.04)
引言 本文主要目标是整理下我在2016年第一季度针对Android学习的内容,不会深入细节,只是简单聊聊框架以及学习的方法. 我的Android之路 因为之前对Android有一个简单的接触,研究生期 ...
- 【转】【MySQL报错】ERROR 1558 (HY000): Column count of mysql.user is wrong. Expected 43, found 39.
之前在centos6.4系统安装的是自带的mysql 5.1版本,后来升级到了5.6版本,执行以下命令报错 在网上查找原因说说因为升级不当导致,执行以下命令即可正常执行命令 mysql_upgrade ...
- Leetcode: Remove Duplicates from Sorted List II 解题报告
Remove Duplicates from Sorted List II Given a sorted linked list, delete all nodes that have duplica ...
- 数据库like匹配的实现猜测
insert into test_fulltext values("王正科技全文") select * from test_fulltext where data like &qu ...
- 无线linux应用及配置--wifi配置
linux下应用wifi,AP侧运行程序hostapd,客户端运行wpa_supplicant.官网:http://w1.fi/. 无线网卡应用 无线网卡的应用服务程序为wpa_supplicant, ...
- DCGAN in Tensorflow生成动漫人物
引自:GAN学习指南:从原理入门到制作生成Demo 生成式对抗网络(GAN)是近年来大热的深度学习模型.最近正好有空看了这方面的一些论文,跑了一个GAN的代码,于是写了这篇文章来介绍一下GAN. 本文 ...
- c++读取文件到vector
读取一个pts文件到一个vector<Point2f>里面. 其中pts文件如下: version: n_points: { } #include <iostream> #in ...
- hive之案例分析(grouping sets,lateral view explode, concat_ws)
有这样一组搜索结果数据: 租户,平台, 登录用户, 搜索关键词, 搜索的商品结果List {"tenantcode":"", "platform&qu ...
- [数据结构]最小生成树算法Prim和Kruskal算法
最小生成树 在含有n个顶点的连通图中选择n-1条边,构成一棵极小连通子图,并使该连通子图中n-1条边上权值之和达到最小,则称其为连通网的最小生成树. 例如,对于如上图G4所示的连通网可以有多棵权值总 ...
- hbase源码系列(十)HLog与日志恢复
HLog概述 hbase在写入数据之前会先写入MemStore,成功了再写入HLog,当MemStore的数据丢失的时候,还可以用HLog的数据来进行恢复,下面先看看HLog的图. 旧版的HLog是实 ...