• 7款HTML5精美应用教程 让你立即爱上HTML5


    你喜欢HTML5吗?我想下面的这7个HTML5应用一定会让你爱上HTML5的,不信就一起来看看吧。

    1、HTML5/jQuery雷达动画图表 图表配置十分简单

    之前我们介绍过不少形形色色的HTML5图表了,像这款HTML5折线图表Aristochart是一款很不错的折线图表,这款HTML5 Canvas饼状图表也很酷。今天我们再来分享一款很特别的HTML5图表,它是利用HTML5和jQuery的雷达动画图表,图表数据在初始化的时候带有一定动画。

    html5-jquery-radar-chart

    在线演示        源码下载

    2、HTML5模拟牛顿力学 碰撞的小球

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

    html5-cradle

    在线演示        源码下载

    3、HTML5 Canvas烟花特效 场景十分华丽

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

    html5-firework-effect

    在线演示        源码下载

    4、jQuery轻量级网页编辑器 选中即可编辑

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

    jquery-notebook

    在线演示        源码下载

    5、CSS3手风琴菜单 下拉展开带弹性动画

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

    css3-accordion-menu

    在线演示        源码下载

    6、HTML5/CSS3 3D环形图片墙 伴随旋转动画

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

    html5-css3-3d-photo-slider

    在线演示        源码下载

    7、HTML5 Canvas正弦波动画 可自定义波长和速度

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

    html5-canvas-sin-animation

    在线演示        源码下载

    怎么样,HTML5很给力吧,希望你也能加入HTML5的阵列,欢迎关注@html5tricks获取更多HTML5应用和教程。

    本文由html5tricks收集整理,转载请务必保留原文链接
    http://www.html5tricks.com/7-html5-app-tutorials.html

  • 相关阅读:
    将WinServers2019打造成家用系统
    WindowsServers2019上手体验
    【代码模板】不存在的NOIP2017
    NOIP2018初赛翻车总结
    【初赛】各种排序算法总结
    【Luogu1996】约瑟夫问题(模拟,解法汇总)
    【初赛】NOIP2018程序模板
    MongoDB
    非关系型数据库----MongoDB
    用Python来操作redis 以及在Django中使用redis
  • 原文地址:https://www.cnblogs.com/html5tricks/p/3615427.html
Copyright © 2020-2023  润新知