Question

我没有svg和动画的经验，我有以下文件jsfiddle，我想为填充路径颜色设置动画。

我想将它用作装载程序，因此新颜色应该填充路径，如滑动或类似的东西，使它看起来像＃34; loading＆＃34;。你可以使用任何颜色，它只是一个例子......

谢谢

Answer 1

我知道这不完全是您想要的方式，但请查看此链接：

http://cdn.tinfishcreativedev.eu/eyeLoad/

它有一个非常简单的实现（非常粗略，但只是为了让你开始）。

HTML文件中的代码如下：

<style>
body{
    background:#F3F5F6;
    text-align: center;
}

.loader{
    background: #000;
    display: inline-block;
    position: relative;
    height:63px;
    width:100px;
    margin-top:300px;
}


.loader img{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index:2;
}

.loaderBar{
    background: #16C38B;
    width: 0;
    position: relative;
    z-index: 1;
    height:100%;
    -webkit-animation:grow 2s infinite linear;
}

@-webkit-keyframes grow{
    0%{ width:0; }
    100%{ width: 100%; }
}
</style>
<div class="loader">
    <img src="eye.png" width="100" />
    <div class="loaderBar">
</div>

如果需要，您甚至可以使用JS代替关键帧来使其在IE8等旧版浏览器上运行。

SVG填充路径动画

1 个答案: