IT技术宅

青春是一个充满活力的季节,即便是我们失去了天使的翅膀,只要我们还有一颗青春的心,那么我们的生活依然能够如阳光般灿烂!......
现在位置:首页 > 代码分享 > 12种炫酷html5 svg加载loading动画特效

12种炫酷html5 svg加载loading动画特效

刘振兴     代码分享      2015年11月23日     2824     3条评论  
1.gif

这是一款使用HTML5 SVG技术制作的12种炫酷html5 svg加载loading动画特效。该loading动画特效直接使用<img>标签来生成SVG图片,关于在页面中使用SVG的方法可以参考这篇文章:《如何在网页中使用SVG》。

html结构非常简单。在任何你想要显示加载loading动画的地方添加标签,src指向一个SVG文件即可

<img src="svg-loaders/puff.svg" />

改变loading动画中图标的颜色

每一个SVG图标的颜色都是可以改变的,方法是在AVG文件中通过 fill 属性来指定你想要的颜色。

	<svg fill="#fff" width="140" height="64" viewBox="0 0 140 64" xmlns="http://www.w3.org/2000/svg">

所有的现代浏览器都支持SVG(IE8及以下浏览器除外),你可以点的这里查看支持SVG的浏览器:http://caniuse.com/#feat=svg-smil

12种svg Loading动画特效大小:8KB | 来源:百度网盘
 密码: p6dx
评论一下 分享本文 赞助本站 联系站长
IT技术宅
 挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
提交评论

清空信息
关闭评论
初心
初心 2017-09-21 15:53 河北省保定市移动 回复
密码是什么
 vivo V3   Google Chrome 38.0.2125.102
破孩先生
破孩先生 2016-03-21 11:47 河南省郑州市联通 回复
不错
 Windows XP   Google Chrome 31.0.1650.63
风信子
风信子 2015-11-24 10:14 陕西省咸阳市电信 回复
在吗?能请教几个问题吗?IT技术宅
 手机发表此评论