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. python类定义与c#的一些区别

    c#中可以定义一个空类,但是python中定义空类需要加pass class EmptyClass(object): pass python的lei是多继承   python子类继承了基类,如果子类也 ...

  2. 如何用Python输出PPT中的文字信息

    在这里,会用到win32com模块 模块下载地址:http://sourceforge.net/projects/pywin32/files/pywin32/ 代码如下: import win32co ...

  3. CSDN 论坛招聘区是不是有潜规则？在Cnblog招个人试试...

    CSDN 论坛招聘区是不是有潜规则? 在招聘区发了两个招聘贴都被删掉了... 而且没有任何提示和原因,或者站内短信提示.... 虽然csdn现在很水...不过在那边之前待了几年还是有点感情的 想顺便内 ...

  4. Prim算法(三)之 Java详解

    前面分别通过C和C++实现了普里姆,本文介绍普里姆的Java实现. 目录 1. 普里姆算法介绍 2. 普里姆算法图解 3. 普里姆算法的代码说明 4. 普里姆算法的源码 转载请注明出处:http:// ...

  5. Java多线程系列--“JUC原子类”03之 AtomicLongArray原子类

    概要 AtomicIntegerArray, AtomicLongArray, AtomicReferenceArray这3个数组类型的原子类的原理和用法相似.本章以AtomicLongArray对数 ...

  6. java.lang.Long cannot be cast to java.lang.Integer解决办法

    情景: mybatis连接oracle 报错: 测试增的时候,报错 Java.lang.Long cannot be cast to  java.lang.Integer:删改没有报错. 排查过程: ...

  7. 记一次上传文件到七牛云存储的经历（Plupload & UEditor）（.net）

    七牛 配置ACCESS_KEY和SECRET_KEY Qiniu.Conf.Config.ACCESS_KEY = "ACCESS_KEY"; Qiniu.Conf.Config. ...

  8. try,catch,throw-----C++

    1.try,catch,throw: try包含你要防护的代码 ,称为防护块. 防护块如果出现异常,会自动生成异常对象并抛出. catch捕捉特定的异常,并在其中进行适当处理. throw可以直接抛出 ...

  9. Web 前端开发人员和设计师必读精华文章【系列二十六】

    <Web 前端开发精华文章推荐>2014年第5期(总第26期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 ...

  10. 聊Javascript中的AOP编程

    Duck punch 我们先不谈AOP编程,先从duck punch编程谈起. 如果你去wikipedia中查找duck punch,你查阅到的应该是monkey patch这个词条.根据解释,Mon ...