有没有人知道浏览器支持使用stroke-dasharray和stroke-dashoffset这样的东西?
我只是在这里问,因为我似乎无法在网络上的任何其他地方找到它。
作为参考,这款笔完全适用于Chrome和Opera。在Firefox上完成时,它会应用错误的填充。在IE上它甚至都没有显示。
http://codepen.io/mildrenben/pen/yydxGY
svg {
width: 1400px;
height: 800px;
stroke-linecap: square;
stroke-width: 10;
stroke: transparent;
fill: none;
stroke-dasharray: 3500;
stroke-dashoffset: 3500;
}
.fil0 {
animation: black 3s ease-in forwards;
}
.fil1, .fil2 {
animation: green 3s ease-in forwards;
}
@keyframes green {
80% {
stroke-dashoffset: 0;
stroke: $green;
}
85% {
fill: transparent;
}
100% {
fill: $green;
stroke-dashoffset: 0;
}
}
@keyframes black {
80% {
stroke-dashoffset: 0;
stroke: $black;
}
85% {
fill: transparent;
}
100% {
fill: $black;
stroke-dashoffset: 0;
}
}