获取像SVG动画路径的CSS动画

是否可以通过CSS创建一个只带有SVG路径的动画？获取像SVG动画路径的CSS动画

CSS

html, body { 
    margin: 0; 
    height: 100%; 
} 
svg { 
    display: block; 
    position: absolute; 
    width: 90%; 
    height: 90%; 
    top: 5%; 
    left: 5%; 
} 
.path { 
    animation: dash 10s linear infinite; 
} 
@-webkit-keyframes dash { 
    to { 
     stroke-dashoffset: 0; 
    } 
}

HTML

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 659 522" enable-background="new 0 0 659 522" xml:space="preserve" preserveAspectRatio="none"> 
    <path class="path" width="100%" height="100%" fill="none" stroke="#00ff00" stroke-width="5" stroke-miterlimit="10" d="M656.5,2.5v517H2.5V2.5H656.5z" stroke-dasharray="2042 300" stroke-dashoffset="2342" vector-effect="non-scaling-stroke" /> 
</svg>

这里是fiddle

来源

2015-09-17 AC3

不，因为CSS不支持此属性或者对其元素具有任何等同属性。另外，您正在使用'@ -webkit-keyframes'，但只是一个'animation'属性，这对我来说不起作用。 – somethinghere

我的意思是，而不是使用SVG路径，只用CSS创建它 – AC3

而我的意思是，CSS没有这种选择，也没有什么好的方法来模仿它。笔画是完整的，并且在CSS中没有偏移量，因此您不能在带有标准HTML元素的CSS中执行此操作，只能使用SVG。不要误解我的意思，你可能会用多个元素和嵌套来伪造它，但我认为你的SVG解决方案可能是你想要的效果的最佳选择。 – somethinghere

我敢肯定SVG是去这里，我想用css像这样的动画方式在使用SVG时会有更多的缺陷。

尽管如此，你可以使用CSS实现类似的动画，市长的缺点是这需要一个固定的高宽比来表示蛇在旋转的元素。否则，动画的速度会有所不同。另一个市长的缺点是它需要周围元素的背景颜色是静态的。

该解决方案使用一个正方形，沿着外边缘移动，给人以移动边界的印象。

.div-wrapper { 
 
    padding: 20px; 
 
    width: 150px; 
 
    height: 150px; 
 
    margin: 50px; 
 
} 
 
.snake { 
 
    border: 2px solid lime; 
 
    display: inline-block; 
 
    position: relative; 
 
    padding: 1vw; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
.snake:before { 
 
    width: 8vw; 
 
    height: 8vw; 
 
    content: ''; 
 
    position: absolute; 
 
    display: block; 
 
    background-color: white; 
 
    animation: around linear 10s infinite; 
 
    transform: rotate(45deg); 
 
    z-index: 1 
 
} 
 
.snake.red:before { 
 
    background-color: red; 
 
} 
 
@keyframes around { 
 
    0% { 
 
    top: calc(-4vw - 1px); 
 
    left: calc(100% - 4vw + 1px); 
 
    } 
 
    25% { 
 
    top: calc(100% - 4vw + 1px); 
 
    left: calc(100% - 4vw + 1px); 
 
    } 
 
    50% { 
 
    top: calc(100% - 4vw + 1px); 
 
    left: calc(-4vw - 1px); 
 
    } 
 
    75% { 
 
    top: calc(-4vw - 1px); 
 
    left: calc(-4vw - 1px); 
 
    } 
 
    100% { 
 
    top: calc(-4vw - 1px); 
 
    left: calc(100% - 4vw + 1px); 
 
    } 
 
}

<div class="div-wrapper"> 
 
    <div class="snake"> 
 
    <div class="content"> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="div-wrapper"> 
 
    <div class="snake red"> 
 
    <div class="content"> 
 
    </div> 
 
    </div> 
 
</div>

老实说，我会坚持使用SVG。

来源

2015-09-17 21:39:48 Lars

是的，我认为这将是最好的，谢谢无论如何，仍然努力使其与CSS！ – AC3

获取像SVG动画路径的CSS动画

回答

相关问题