你喜欢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的更多相关文章

  1. 7款HTML5的精美应用教程让你立即爱上HTML5

    1,HTML5/jQuery雷达动画图表图表配置十分简单 分享一款很特别的HTML5图表,它是利用HTML5和jQuery的雷达动画图表,图表数据在初始化的时候带有一定动画. 在线演示 源码下载 2, ...

  2. LayaAir引擎开发HTML5最简单教程(面向JS开发者)

    LayaAir引擎开发HTML5最简单教程(面向JS开发者) 一.总结 一句话总结:开发游戏还是得用游戏引擎来开发,其实很简单啦 切记:开发游戏还是得用游戏引擎来开发,其实很简单,引擎很多东西都帮你做 ...

  3. 教你如何用PS制作多款按钮UI设计教程

    教你如何用PS制作多款按钮UI设计教程 本文教大家制作按钮的方法 LV. ★ 初入设计,学做按钮.只会套个底色,加个阴影,字体纯白,小聪明的弄个圆角. LV. ★★(描边.字体.内阴影) 看了很多案例 ...

  4. [js高手之路] html5 canvas系列教程 - 掌握画直线图形的常用API

    我们接着上文[js高手之路] html5 canvase系列教程 - 认识canvas以及基本使用方法继续. 一.直线的绘制 cxt.moveTo( x1, y1 ): 将画笔移动到x1, y1这个点 ...

  5. [js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具)

    之前,我写了一个arc函数的用法:[js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线,弧线,圆形). arcTo: cxt.arcTo( cx, cy, x2, y2, ...

  6. [js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线,弧线,圆形)

    绘制曲线,经常会用到路径的知识,如果你对路径有疑问,可以参考我的这篇文章[js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解. arc:画 ...

  7. [js高手之路] html5 canvas系列教程 - 图片操作(drawImage,clip,createPattern)

    接着上文[js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)继续,本文介绍的 ...

  8. [js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)

    接着上文线条样式[js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)继续. canvas提供两种输出文本的方 ...

  9. [js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)

    上文,写完弧度与贝塞尔曲线[js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具),本文主要是关于线条的样式设置 lineWidth: 设置线条的宽 ...

随机推荐

  1. 多媒体文件格式之AVI

    [时间:2016-07] [状态:Open] AVI(Audio Video Interleaved的缩写)是一种RIFF(Resource Interchange File Format的缩写)文件 ...

  2. 【转】如何在Mac上卸载Java及安装Java

    如何在 Mac 上卸载 Java? 本文适用于: 平台: Macintosh OS X Java 版本: 7.0, 8.0 使用终端卸载 Oracle Java 注:要卸载 Java,必须具有管理员权 ...

  3. Java后台测试技巧

    [本文出自天外归云的博客园] 问题 很多测试是和后台代码逻辑相关的,比如: 接口测试 接口文档里面包含了接口的url.用途.一些上行参数和下行参数的描述信息. 但是要想知道这些参数取值的来龙去脉,还是 ...

  4. 设计模式之开放-封闭原则(引申出Objective-C中继承、Category、Protocol三者的区别,这点面试常问)

    开放封闭原则(OCP原则The Open-Closed Principle)是面向对象的核心设计所在.它是说,软件开发实体(类.模块.函数等)应该可以扩展,但是不能修改. 这个原则有两个特征,一个是说 ...

  5. SQL 分页 SQL SERVER 2008

    public IList<UserInfo> GetPageList(int pageSize, int pageIndex, out int totalItemCount) { var ...

  6. django源码解析之 BooleanField (二)

    class BooleanField(Field): empty_strings_allowed = False default_error_messages = { 'invalid': _(u&q ...

  7. Spring Batch事务处理

    事务模型描述 1.step之间事务独立 2.step划分成多个chunk执行,chunk事务彼此独立,互不影响:chunk开始开启一个事务,正常结束提交.chunk表示给定数量的item的操作集合,主 ...

  8. php中文语义分析

    最近公司有个需求要做文章关键词提取,发现有个波森语义分析,还不错,把其http接口封装了一下, 发布到packagist上了. 简介 简单的封装了BosonNLP中文语义识别的api. 安装 comp ...

  9. 【Java笔记】配置文件java.util.Properties类的使用

    配置文件的路径:项目名/src/main/resources/mmall.properties mmall.properties的内容是键值对.例如假设写了ftp服务器的一些信息. ftp.serve ...

  10. 【Unity】AssetBundle的使用——打包/解包

    最近参考了各位大神的资源,初步学习了Unity的资源管理模式,包括在编辑器管理(使用AssetDatabase)和在运行时管理(使用Resources和AssetBundle).在此简单总结运行时用A ...