<span style="font-size:16px;">
<p class="blue" style="margin-top:0px;margin-bottom:0px;padding:0px 0px 10px;border:0px;text-indent:2em;line-height:25px;font-family:'Microsoft Yahei', Arial;font-size:14px;white-space:normal;background-color:#FFFFFF;">

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

</p>
<p class="blue" style="margin-top:0px;margin-bottom:0px;padding:0px 0px 10px;border:0px;text-indent:2em;line-height:25px;font-family:'Microsoft Yahei', Arial;font-size:14px;white-space:normal;background-color:#FFFFFF;">

html结构非常简单。在任何你想要显示加载loading动画的地方添加<img style="margin:0px;padding:0px;width:315.1875px;height:auto;" />标签,src指向一个SVG文件即可

</p>

<img src="svg-loaders/puff.svg" />
<h2 style="margin:0px;padding:0px;border:0px;font-weight:normal;font-size:14px;font-family:'Microsoft Yahei', Arial;line-height:normal;white-space:normal;background-color:#FFFFFF;"> 改变loading动画中图标的颜色 </h2> <p style="margin-top:0px;margin-bottom:0px;padding:0px 0px 10px;border:0px;line-height:25px;font-family:'Microsoft Yahei', Arial;font-size:14px;white-space:normal;background-color:#FFFFFF;"> 每一个SVG图标的颜色都是可以改变的,方法是在AVG文件中通过 fill 属性来指定你想要的颜色。 </p>
    <svg fill="#fff" width="140" height="64" viewBox="0 0 140 64" xmlns="http://www.w3.org/2000/svg">

<p style="margin-top:0px;margin-bottom:0px;padding:0px 0px 10px;border:0px;line-height:25px;font-family:'Microsoft Yahei', Arial;font-size:14px;white-space:normal;background-color:#FFFFFF;">

所有的现代浏览器都支持SVG(IE8及以下浏览器除外),你可以点的这里查看支持SVG的浏览器:<a href="http://caniuse.com/#feat=svg-smil" target="_blank" style="margin:0px;padding:0px;border:0px;text-decoration:none;color:#333333;">http://caniuse.com/#feat=svg-smil</a>。

</p>
</span>

Last modification:July 5th, 2020 at 11:50 pm