html5 加载svg,HTML5 SVG应用（1）——loading效果

先看一下效果： 链接

代码：

y="0px" width="40px" height="40px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">

repeatCount="indefinite" />

path中的d属性中，包含了四个点的坐标：(自己看人家的代码，没有实践，坐标太多，头疼！ ‘-.-’)

第一个点：M26.013,10.047

第二个点：l1.654-2.866

贝塞尔曲线：c-2.198-1.272-4.743-2.012

第三个点：h0v3.312

贝塞尔曲线：C22.32,8.481,24.301,9.057

第四个点：26.013,10.047

颜色设置CSS：

svg path,

svg rect {

fill: #FF6700;

}

基于HTML5 Canvas 实现的 Loading 效果

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

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

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

HTML5 Canvas 实现的9个 Loading 效果

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

12种超酷HTML5 SVG和CSS3浮动标签效果

这是一组效果很炫酷的SVG和CSS3表单浮动标签特效.这组浮动标签特效共12种效果,这些浮动标签效果部分在元素的伪元素上使用CSS transitions和CSS animations完毕,一部分则使 ...

html5 svg 圆形进度条

html5 svg 圆形进度条

CSS3轻松实现清新 Loading 效果

至今HTML5中国已经为大家分享过几百种基于 CSS3 的Loading加载动画,效果酷炫代码简洁,非常值得学习借鉴;今天就先给大家分享两个常用的CSS3的Loading的案例. 第一种效果: HTM ...

基于HTML5 SVG炫酷文字爆炸特效

这是一款使用html5 svg.css3和js制作的炫酷文字爆炸特效.该文字特效用SVG path属性将文字路径切割为很多小块,然后使用css3和js在鼠标滑过文字时制作文字爆炸分裂的炫酷效果. 在线 ...

9款基于HTML5/SVG/Canvas的折线图表应用

1.华丽的HTML5图表 可展示实时数据 HTML5在图表应用中也十分广泛,比起以前的网页图表,HTML5图表制作更便捷,功能更强大.这款HTML5图表插件外观十分华丽和专业,在数据展示方面也很有优势 ...

超炫HTML5 SVG聊天框拖拽弹性摇摆动画特效

这是一款很有创意的HTML5 SVG聊天框拖拽弹性摇摆动画特效. 用户能够用鼠标点击或用手滑动聊天框上的指定区域,该区域会以很有弹性的弹簧效果拉开聊天用户列表.点击一个用户头像后.又以同样的弹性特效切 ...

12种炫酷HTML5 SVG和CSS3表单浮动标签特效

这是一组效果非常炫酷的HTML5 SVG和CSS3表单浮动标签特效.这组浮动标签特效共12种效果,使用SVG和CSS3来制作完成.这些浮动标签效果部分在元素的伪元素上使用CSS transitions ...

随机推荐

web app 自适应 弹性布局之rem

关于rem,主要参考文档 1.腾讯ISUX (http://isux.tencent.com/web-app-rem.html) 2.http://www.w3cplus.com/css3/defin ...

iLinuxBot: Designing Botnets to Manage Linux Clients

转:http://www.linuxforu.com/2012/05/ilinuxbot-designing-botnets-to-manage-linux-clients/ By Nishant S ...

VC 最爱问的问题：你这个创业项目，如果腾讯跟进了，而且几乎是产品上完全复制，你会怎么办？

VC 最爱问的问题:你这个创业项目,如果腾讯跟进了,而且几乎是产品上完全复制,你会怎么办? http://www.zhihu.com/question/19607233 朱继玉,独立精神,自由思想. ...

c while 循环

c代码: #include int main(void){ unsigned long sum=1UL; unsigned int j=1U; unsigned ; p ...

Javascript 层次

1. HTML5, Tool, Framework ---------------------------UI: Liger UI, jQuery UI, jQuery Mobile -------- ...

hdu1540-Tunnel Warfare (线段树区间合并)

题意:n个村庄,有三种操作,D x 破坏位置为x的村庄,R 修复上一次被破坏的村庄,Q x 输出含有x村庄的连续村庄的最大个数.线段树搞之,区间合并. ls[maxn]为当前节点左面的连续区间,rs[ ...

在windows 8.1 64位配置python和opencv

之前在linux下安装python和opencv及相关的库,都可以直接命令行操作.最近需要在windows下配置一下,查了一些资料,发现网上有很多关于python和opencv的配置,但由于不同版本问 ...

Android日志工具的使用

一.使用Android的日志工具Log 1.Android中的日志工具类是Log,这个类中提供了如下5个方法来供我们打印日志. log.v():用于打印哪些最为繁琐.意义最小的日志信息.对应级别ver ...

[ML学习笔记] 朴素贝叶斯算法(Naive Bayesian)

[ML学习笔记] 朴素贝叶斯算法(Naive Bayesian) 贝叶斯公式 \[P(A\mid B) = \frac{P(B\mid A)P(A)}{P(B)}\] 我们把P(A)称为"先 ...

微信公众号H5支付

微信支付说明1.统一下单接口 统一支付接口: url: https://api.mch.weixin.qq.com/pay/unifiedorder 目的:通过此接口来创建预支付订单,获取订单支付需要 ...