如何使用SVG + CSS繪製X Sign？

Question

我需要創建一個「X」複選標記動畫（對於失敗）。

我發現了一個很好的動畫「v」複選標記示例（成功）。代碼使用曲線貝塞爾設計。 我試過閱讀並試圖做一個X標誌，但沒有成功。

你能幫我嗎？

的鏈接，在「V」對號是： http://codepen.io/haniotis/pen/KwvYLO

.checkmark__circle { 
 
    stroke-dasharray: 166; 
 
    stroke-dashoffset: 166; 
 
    stroke-width: 2; 
 
    stroke-miterlimit: 10; 
 
    stroke: #7ac142; 
 
    fill: none; 
 
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards; 
 
} 
 
.checkmark { 
 
    width: 56px; 
 
    height: 56px; 
 
    border-radius: 50%; 
 
    display: block; 
 
    stroke-width: 2; 
 
    stroke: #fff; 
 
    stroke-miterlimit: 10; 
 
    margin: 10% auto; 
 
    box-shadow: inset 0px 0px 0px #7ac142; 
 
    animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both; 
 
} 
 
.checkmark__check { 
 
    transform-origin: 50% 50%; 
 
    stroke-dasharray: 48; 
 
    stroke-dashoffset: 48; 
 
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards; 
 
} 
 
@keyframes stroke { 
 
    100% { 
 
    stroke-dashoffset: 0; 
 
    } 
 
} 
 
@keyframes scale { 
 
    0%, 100% { 
 
    transform: none; 
 
    } 
 
    50% { 
 
    transform: scale3d(1.1, 1.1, 1); 
 
    } 
 
} 
 
@keyframes fill { 
 
    100% { 
 
    box-shadow: inset 0px 0px 0px 30px #7ac142; 
 
    } 
 
}

<svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52"> 
 
    <circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none" /> 
 
    <path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8" /> 
 
</svg>

Answer 1

你只需要改變路徑定義，形成一個「X」，改變了虛線圖案和偏移以補償改變的路徑長度。

我已經簡單了，這裏只是X的兩條腿同時被繪製。有了額外的<path>元素和一些額外的CSS，你可以使它在兩個步驟中繪製X.

.checkmark__circle { 
 
    stroke-dasharray: 166; 
 
    stroke-dashoffset: 166; 
 
    stroke-width: 2; 
 
    stroke-miterlimit: 10; 
 
    stroke: #7ac142; 
 
    fill: none; 
 
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards; 
 
} 
 
.checkmark { 
 
    width: 56px; 
 
    height: 56px; 
 
    border-radius: 50%; 
 
    display: block; 
 
    stroke-width: 2; 
 
    stroke: #fff; 
 
    stroke-miterlimit: 10; 
 
    margin: 10% auto; 
 
    box-shadow: inset 0px 0px 0px #7ac142; 
 
    animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both; 
 
} 
 
.checkmark__check { 
 
    transform-origin: 50% 50%; 
 
    stroke-dasharray: 29; 
 
    stroke-dashoffset: 29; 
 
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards; 
 
} 
 
@keyframes stroke { 
 
    100% { 
 
    stroke-dashoffset: 0; 
 
    } 
 
} 
 
@keyframes scale { 
 
    0%, 100% { 
 
    transform: none; 
 
    } 
 
    50% { 
 
    transform: scale3d(1.1, 1.1, 1); 
 
    } 
 
} 
 
@keyframes fill { 
 
    100% { 
 
    box-shadow: inset 0px 0px 0px 30px #7ac142; 
 
    } 
 
}

<svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52"> 
 
    <circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none" /> 
 
    <path class="checkmark__check" fill="none" d="M16 16 36 36 M36 16 16 36" /> 
 
</svg>