Ich möchte CSS-Übergänge Grenze fieldset
als Häkchen-Kreis, wie ist es?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>
Versuchen Sie, 'inline' Stile zu verwenden, wenn Sie können. Was deine Grenze angeht, was hast du alles versucht? Denken Sie daran, dass stackoverflow kein Platz ist, um andere zu bitten, die Arbeit für Sie zu erledigen. – Michael
Bitte klären Sie Ihr spezifisches Problem oder fügen Sie weitere Details hinzu, um genau das hervorzuheben, was Sie benötigen. Wie es derzeit geschrieben wird, ist es schwer zu sagen, was genau Sie fragen. –
@Paulie_D Ich möchte Übergänge Grenze Feldset Beispiel dies: https://jsfiddle.net/n97cteve/ aber ohne Hover.was soll ich tun? –