我有这个代码动画使用HTML5,CSS3动画和SVG line
。它只适用于Chrome,Opera和Firefox,并且在IE和Safari中不工作 。任何解决方案SVG和CSS3动画无法在IE和Safari中工作
下面是代码:
.line {
width: 65%;
margin: 0 auto;
}
#svg path.path {
stroke-dasharray: 3000;
stroke-dashoffset: 4000;
stroke-width: 2;
-webkit-animation: lines 5s linear forwards;
-moz-animation: lines 5s linear forwards;
-ms-animation: lines 5s linear forwards;
-0-animation: lines 5s linear forwards;
animation: lines 5s linear forwards;
}
@keyframes lines {
form {
stroke-dashoffset: 4000;
}
to {
stroke-dashoffset: 0;
}
}
@-webkit-keyframes lines {
form {
stroke-dashoffset: 4000;
}
to {
stroke-dashoffset: 0;
}
}
@-moz-keyframes lines {
form {
stroke-dashoffset: 4000;
}
to {
stroke-dashoffset: 0;
}
}
@-ms-keyframes lines {
form {
stroke-dashoffset: 4000;
}
to {
stroke-dashoffset: 0;
}
}
@-o-keyframes lines {
form {
stroke-dashoffset: 4000;
}
to {
stroke-dashoffset: 0;
}
}
<div class="line">
<svg id="svg" stroke="#000" stroke-miterlimit="1000" id="Layer_1" style="opacity:1;" x="0px" y="0px" viewBox="0 0 960 560" enable-background="new 0 0 960 560" xml:space="preserve">
<path class="path" fill="#fff" stroke="#000" stroke-miterlimit="1000" stroke-dasharray="11.9901,11.9901" d="M52.652,248.08
c30.97,37.245,74.957,63.396,122.172,75.244c53.056,13.313,109.816,9.162,161.756-7.968
c42.308-13.953,83.007-37.533,108.174-74.156c4.655-6.774,8.818-14.153,10.027-22.271c2.24-15.044-6.187-29.969-17.51-40.177
c-28.483-25.679-73.116-26.422-108.534-11.588c-54.196,22.698-92.323,81.422-86.252,139.649
c6.07,58.228,59.091,109.265,117.886,109.022c20.716-0.085,41.065-5.884,60.092-14.042c18.307-7.85,35.789-18.023,50.322-31.606
c14.503-13.555,25.718-30.139,37.837-45.845c17.476-22.649,37.883-44.311,64.254-55.552c26.37-11.241,59.879-9.795,80.612,9.943
c30.67,29.196,23.317,84.899,56.145,111.668c29.1,23.729,74.437,10.683,102.618-14.121c32.31-28.438,51.374-68.875,65.118-109.573
c12.464-36.907,21.327-75.103,35.836-111.202" />
</svg>
</div>
我想通过它在IE和Safari浏览器工作解决它。请尽可能使用 仅限HTML5,CSS和SVG。
@ aliasm2k为什么你会采取HTML5画布出?请分享您的意见? –
我也拿出了标签。没有真正提到HTML5 Canvas,你没有使用Canvas API共享JS代码,声称“仅HTML5”不会自动指向Canvas。如果你想让你的解决方案在Canvas中,那么在问题本身中清楚地说明它,并提供你自己尝试过的JS代码。 – Xufox
感谢您编辑我的标签,是的,你是对的,但如果我的代码中没有解决方案,那么为什么我说如果可能呢? (它可能在HTML5 Canvas中) –