html5 css3 loading 效果
canvas html5load1
主要思路update 实现12个点的绘制和旋转效果
- var update = function() {
- ctx.save();// 把当前绘图状态保存起来
- ctx.clearRect(0, 0, 128, 128);// 擦除画布
- ctx.translate(64, 64);// 把坐标原点移到画布中央
- base = (++base === 13) ? (base - 12) : base;// 使用base来指示最大的圆点所在的位置,对应起点的12个位置,实现旋转动画的效果
- var angle = Math.PI / 6;// 画12个点,所以每个点之间的角度是1/6 PI
- var beginAngle = angle * base;
- for ( var i = 1; i <= 12; i++) {
- ctx.beginPath();// 开始一个路径
- if (i === 1) {
- ctx.rotate(beginAngle);
- } else {
- ctx.rotate(angle);// 每次调用rotate之后,其旋转角度并不会还原,而是接着上一次的
- }
- ctx.arc(0, -48, i * 0.8 + 1, 0, 2 * Math.PI, true);// 绘制一个圆点
- ctx.closePath();// 闭合路径
- ctx.fill();
- }
- ctx.restore();// 还原绘图状态,如果不还原,则下一次调用roatate时会接着这次的位置旋转,而不是初始位置
- }
demon https://github.com/breakfriday/loadingDemo
html5 css3 loading 效果的更多相关文章
- HTML5+CSS3 loading 效果收集--转载
用gif图片来做loading的时代已经过去了,它显得太low了,而用HTML5/CSS3以及SVG和canvas来做加载动画显得既炫酷又逼格十足.这已经成为一种趋势. 这里收集了几十个用html5和 ...
- CSS3 loading效果全
梦想天空 关注前端开发技术 ◆ 推动 HTML5 & CSS3 技术发展 ◆ 本博客全新站点:yyyweb.com 欢迎围观:) 首页 管理 订阅 网页设计 JavaScript jQuery ...
- 那些不错的 [ Html5 + CSS3 + Canvas ] 效果!
apng制作工具:http://isparta.github.io/how.html apng制作文章:http://isux.tencent.com/introduction-of-apng.htm ...
- css3 loading效果
file:///E:/zhangqiangWork/2014/SPDbank/index.html 参考该网站 http://tobiasahlin.com/spinkit/ 查看源代码把里面的dom ...
- css3 loading 效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 分享9款极具创意的HTML5/CSS3进度条动画
1.HTML5/CSS3图片加载进度条 可切换多主题 今天要分享的这款HTML5/CSS3进度条模拟了真实的图片加载场景,插件会默认去从服务器下载几张比较大的图片,然后让该进度条展现当前读取图片的进度 ...
- 9款极具创意的HTML5/CSS3进度条动画(免积分下载)
尊重原创,原文地址:http://www.cnblogs.com/html5tricks/p/3622918.html 免积分打包下载地址:http://download.csdn.net/detai ...
- 9款极具创意的HTML5/CSS3进度条动画
今天我们要分享9款极具创意的HTML5/CSS3进度条动画,这些进度条也许可以帮你增强用户交互和提高用户体验,喜欢的朋友就收藏了吧. 1.HTML5/CSS3图片加载进度条 可切换多主题 今天要分享的 ...
- 推荐7款新鲜出炉的HTML5/CSS3应用
1.HTML5/CSS3发光文字可自定义文字色彩效果很赞 要分享的这款HTML5/CSS3文字效果很帅,鼠标滑过文字时,文字会出现发光的特效,并且我们可以自定义文字和颜色. 在线演示 源码下载 2.H ...
随机推荐
- 前端 js 实现简单 表单提交
1. 登录页 验证用户身份,登录成功之后等待一定秒数,跳转到操作页面 <html> <head> <title>Login.html</title> & ...
- currentColor-CSS3非常有用的变量
一.currentColor-简介 currentColor顾名思意就是“当前颜色”,准确讲应该是“当前的文字颜色”,例如: .xxx { border: 1px solid currentColor ...
- 【目录】processing
Processing 小代码 小代码2 小代码3 小代码4 小代码5
- 基于Struts2CRUD的质量属性
基于struts2框架开发的<学生管理系统>的质量属性 我们经常重新设计系统,可能不是因为该系统在功能上有缺陷,而是由于:系统运行速度太慢.系统容易受到外界攻击.用另外的一句话说:我们修改 ...
- LeetCode之171. Excel Sheet Column Number
---------------------------------- 乘权相加即可. AC代码:(从右往左) public class Solution { public int titleToNum ...
- C/C++中无条件花括号的妙用
C/C++中无条件花括号可以形成一个代码块,一个作用域.可以使括号内定义的变量就只在本域(就是这个大括号)内有效,而且不会影响其他域,即使名字相同. 在花括号内,如果变量前面带类型,则相当于新创建一个 ...
- 在IntelliJ IDEA中添加框架支持时找不到Hibernate的解决办法
问题描述 第一次在Add Frameworks support界面中添加hibernate支持的时候,异常中断,导致没有成功添加. 第二次进入Add Frameworks support窗口时,发现找 ...
- 【转】Oracle索引列NULL值引发执行计划该表的测试示例
有时开发进行表结构设计,对表字段是否为空过于随意,出现诸如id1=id2,如果允许字段为空,因为Oracle中空值并不等于空值,有可能得到意料之外的结果.除此之外,最关键的是,NULL会影响oracl ...
- 【Alpha】Daily Scrum Meeting第九次
一.本次Daily Scrum Meeting主要内容 汇报情况. 上次提到的数据库字段问题,已经和合作队伍统一完毕. 在服务器上解析Json数据仍在解决中,现在直接使用手机发过去的数据进行解析. 二 ...
- Java技巧(代码简略)
1.将数组循环显示 int[] num = new int[]{1,3,5,7,9}; int currentNum=0; num[++current%num.length];