獲取像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動畫

回答

相關問題