Sonic.js 是一个很小的 JavaScript 类，用于创建基于 HTML5 画布的加载图像。更强大的是 Sonic.js 还提供了基于现成的例子的创建工具，可以帮助你实现更多自定义的（Loading）加载动画效果。

在线演示      源码下载

　

您可能感兴趣的相关文章

本文链接：HTML5 Canvas 实现的9个 Loading 效果

编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

本文出处【http://www.cnblogs.com/lhb25/】

HTML5 Canvas 实现的9个 Loading 效果的更多相关文章

  1. [js高手之路] html5 canvas教程 - 制作一个数码倒计时效果

    效果图: 这个实例主要注意: 1,剩余时间的计算 2,每个时间数字的绘制 时间主要有0-9和一个冒号组成,用数组来表示( 0: 就是不画圆,1:就是画一个蓝色的圆 ) num.js文件: var di ...

  2. HTML5 SVG应用（1）——loading效果

    先看一下效果: 链接 代码: <svg version="1.1" id="loader-1" xmlns="http://www.w3.org ...

  3. 超酷！！HTML5 Canvas 水流样式 Loading 动画

    今天我们要分享另外一款基于HTML5 Canvas的液体流动样式Loading加载动画,这款Loading动画在加载时会呈现液体流动的动画效果,并且由于和背景颜色的对比,也略微呈现发光的动画效果. 效 ...

  4. HTML5 Canvas 高仿逼真 3D 布料图案效果

    HTML5 规范引进了很多新特性,其中最令人期待的之一就是 Canvas 元素,HTML5 Canvas 提供了通过 JavaScript 绘制图形的方法,非常强大.下面给大家分享一个 HTML5 C ...

  5. 利用html5 canvas实现纯前端上传图片的裁剪

    今天跟大家分享一个前端裁剪图片的方法.许多网站都有设置用户头像的功能,用户可以选择一张本地的图片,然后用网站的裁剪工具进行裁剪,然后设置大小,位置合适的头像.当然,网上也有一些用js写的诸如此类裁剪的 ...

  6. HTML5 canvas生成图片马赛克特效插件

    HTML5 canvas生成图片马赛克特效插件 简要教程 这是一款使用html5 canvas来将图片制作成马赛克效果的js插件.该插件的灵感来自于美国肖像画家Chuck Close.已经有人使用这个 ...

  7. HTML5+CSS3 loading 效果收集－－转载

    用gif图片来做loading的时代已经过去了,它显得太low了,而用HTML5/CSS3以及SVG和canvas来做加载动画显得既炫酷又逼格十足.这已经成为一种趋势. 这里收集了几十个用html5和 ...

  8. html5 canvas首屏自适应背景动画循环效果代码

    模板描述:html5 canvas首屏自适应背景动画循环效果代码 由于动态图太大,怕以后服务器受不了,所以现在都改为静态图了,大家点击演示地址一样的,希望大家喜欢,你们的支持就是小海的动力!! 欢迎大 ...

  9. 使用 HTML5 Canvas 绘制出惊艳的水滴效果

    HTML5 在不久前正式成为推荐标准,标志着全新的 Web 时代已经来临.在众多 HTML5 特性中,Canvas 元素用于在网页上绘制图形,该元素标签强大之处在于可以直接在 HTML 上进行图形操作 ...

随机推荐

  1. Android二维码之创建

    由于微信的推出二维码走进了我们的生活,并且越来越多的人们正在发挥着自己的想象力去使用它,来方便我们的生活,我曾经听说过一个笑话,当我们死后,墓碑上不再有墓志铭,而会出现一个记录你一生信息的二维码,当人 ...

  2. Nodejs学习笔记（三）——一张图看懂Nodejs建站

    前言:一条线,竖着放,如果做不到精进至深,那就旋转90°,至少也图个幅度宽广. 通俗解释上面的胡言乱语:还没学会爬,就学起走了?! 继上篇<Nodejs学习笔记(二)——Eclipse中运行调试 ...

  3. 关注经典：CSS Awards 获奖网站作品赏析《第一季》

    每天都有很多新的网站推出,其中不乏一些设计极其优秀的作品.这个系列的文章,我为大家挑选了2012年赢得 CSS Awards 大奖的50个最佳网站.这些鼓舞人心的网站作品代表了网页设计的最高水平,相信 ...

  4. Struts+Hibernate+Spring实现用户登录功能

    通过登录案例实现三大框架之间的整合,登录功能是任何系统和软件必不可少的一个模块,然而通过这个模块来认识这些复杂的框架技术,理解数据流向和整个设计思路是相当容易的.只有在掌握了这些小模块的应用后,才能轻 ...

  5. [git]撤销的相关命令：reset、revert、checkout

    基本概念 工作区 暂存区 本地版本仓库 远程版本仓库 如果不清晰上面的四个概念,请查看廖老师的git教程 这里我多说几句:最开始我使用git的时候,我并不明白我为什么写完代码要用git的一些列指令把我 ...

  6. JAVA 设计模式 组合模式

    用途 组合模式 (Component) 将对象组合成树形结构以表示“部分-整体”的层次结构.组合模式使得用户对单个对象和组合对象的使用具有唯一性. 组合模式是一种结构型模式. 结构

  7. Linux 小工具学习之（1）——Wget十例[翻译]

    在本博文中我们将学习一下wget这个工具.wget可以使用HTTP.HTTPS.和FTP等常见网络协议来从万维网(WWW)获取文件(从它的名字来源也可以看出 World Wide Web Get -& ...

  8. C++ - 虚基类、虚函数与纯虚函数

    虚基类       在说明其作用前先看一段代码 class A{public:    int iValue;}; class B:public A{public:    void bPrintf(){ ...

  9. C#对图片文件的压缩、裁剪操作初探

    在做项目时,对图片的处理,以前都采用在上传时,限制其大小的方式,这样带来诸多不便.毕竟网站运维人员不一定会对图片做处理,经常超出大小限制,即使会使用图片处理软件的,也由于个人水平方面原因,处理效果差强 ...

  10. Akka to .NET

    Akka.NET Current Roadmap Akka.NET is a community-driven port of the popular Java/Scala framework Akk ...