CSS Border Draw

-3

我希望CSS將邊框fieldset轉換爲複選標記圓圈，它是如何工作的？CSS Border Draw

.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; 
 
    } 
 
}

<fieldset style=" border: 1px solid #7ac142; border-radius: 10px; "> 
 
    <legend> 
 
     <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"></circle> 
 
      <path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"></path> 
 
     </svg> 
 
    </legend> 
 
    <div class="span12 space-3" style=" font-weight: bold; font-size: 18px; text-align: center; "> 
 
     Hello World! 
 
    </div> 
 
</fieldset>

來源

2016-12-10 Me hdi

儘量避免使用'內聯'樣式，如果可以的話。至於動畫邊界，你嘗試過什麼？請記住，stackoverflow不是要求他人爲你完成工作的地方。 – Michael

請說明您的具體問題或添加更多的細節，以確切地突出你需要什麼。正如它目前所寫，很難確切地說出你在問什麼。 –

@Paulie_D我想過渡邊界字段集例如：https://jsfiddle.net/n97cteve/但沒有懸停，我該怎麼辦？ –

追隨你的提琴：

從svg-wrapper規則形狀的狀態取出:hover，並設置了一類新的.complete，在CSS：

.svg-wrapper .shape.complete { /* Instead of .svg-wrapper:hover .shape */ 
    stroke-width: 2px; 
    stroke-dashoffset: 0; 
    stroke-dasharray: 760; 
}

使用Javascript，確保已經在DOM結構和tr中創建了形狀通過在形狀上添加類complete來igger狀態更改：

(function shapeReady() { 
    var svgShape = document.querySelector('.svg-wrapper .shape'); 
    if (!svgShape) {setTimeout(shapeReady, 50); return;} 
    svgShape.classList.add('complete'); 
})();

來源

2016-12-11 02:47:15

謝謝爲您的迴應，如何在我的代碼中使用它：https://jsfiddle.net/x93qf4xk/開始從複選標記圈轉換邊界，我該怎麼辦？ –

不用擔心。我建議你按照自己的需求努力改進解決方案，如果遇到某些技術問題，請再次詢問，我和其他人會協助解決。但你必須先工作:) –

回答

相關問題