0
206
VistasAnimación circular de cuenta regresiva css
Estoy tratando de crear una animación de cuenta regresiva en un círculo. He creado casi todas las partes, excepto que no puedo agregar otro círculo dentro del círculo que debería animarse hacia abajo.
Todo lo que necesito es obtener exactamente la misma versión animada de la imagen de abajo.
Aquí está el fragmento de código al que he llegado hasta ahora. Simplemente no soy bueno en svgs y no puedo insertar el círculo pequeño.
body { height: 100%; width: 100%; background-color: #333; } #countdown { position: relative; margin: auto; margin-top: 100px; height: 40px; width: 40px; text-align: center; } #countdown-number { color: white; display: inline-block; line-height: 40px; } svg { position: absolute; top: 0; right: 0; width: 40px; height: 40px; transform: rotateZ(-90deg); } svg circle { stroke-dasharray: 113px; stroke-dashoffset: 0px; stroke-linecap: round; stroke-width: 2px; stroke: #198051; fill: none; animation: countdown 30s linear infinite forwards; } @keyframes countdown { from { stroke-dashoffset: 0px; } to { stroke-dashoffset: 113px; } } <div id="countdown"> <div id="countdown-number"></div> <svg> <circle r="18" cx="20" cy="20"></circle> </svg> </div>EDITAR FYI: solo necesito agregar el pequeño círculo verde claro dentro de la animación.
2 Respuestas
Responde la pregunta0
Estoy acostumbrado a hacer estas cosas con css. Puede insertar un cuadrado (morado) en #countdown (verde), justificar un cuadro más pequeño (rojo) y luego girar el agujero. (Para convertir el cuadro rojo en un círculo alrededor de las esquinas)
body { height: 100%; width: 100%; background-color: #333; } #countdown { position: relative; margin: auto; margin-top: 100px; height: 40px; width: 40px; text-align: center; border: 1px solid green; } #small-circle-box{ display:grid; justify-items: center; position:absolute; inset:-5px; border: 2px solid purple; animation: rotate 30s linear infinite forwards; } #small-circle{ height:10px; width: 10px; background-color: red; } #countdown-number { color: white; display: inline-block; line-height: 40px; } svg { position: absolute; top: 0; right: 0; width: 40px; height: 40px; transform: rotateZ(-90deg); } svg circle { stroke-dasharray: 113px; stroke-dashoffset: 0px; stroke-linecap: round; stroke-width: 2px; stroke: #198051; fill: none; animation: countdown 30s linear infinite forwards; } @keyframes countdown { from { stroke-dashoffset: 0px; } to { stroke-dashoffset: 113px; } } @keyframes rotate { from { transform:rotate(0); } to { transform:rotate(-360deg); } } <div id="countdown"> <div id="countdown-number"></div> <div id="small-circle-box"><div id="small-circle"></div></div> <svg> <circle r="18" cx="20" cy="20"></circle> </svg> </div>0
Agregué algunos círculos adicionales al SVG y una animación de fotograma clave que gira el círculo #c1 .
Y luego creo que tendría sentido dejar que el texto sea parte del SVG también.
body { background-color: #333; } #countdown { margin: 10px; height: 160px; width: 160px; } svg circle#c2 { stroke-dasharray: 113px; stroke-dashoffset: 0px; stroke: #198051; animation: countdown 30s linear infinite forwards; } svg circle#c3 { stroke: #198051; opacity: .3; } circle#c1 { fill: lime; animation: rotate 30s linear infinite forwards; } svg text { font-family: sans-serif; fill: white; font-weight: bold; dominant-baseline: middle; text-anchor: middle; font-size: 12px; } @keyframes countdown { from { stroke-dashoffset: 0px; } to { stroke-dashoffset: 113px; } } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } } <div id="countdown"> <svg viewBox="0 0 40 40"> <g transform="translate(20 20) rotate(-90)" stroke-width="4" fill="none" stroke-linecap="round"> <circle id="c3" r="18"/> <circle id="c2" r="18"/> <circle id="c1" r="2" cx="18"/> </g> <text x="20" y="20">46</text> </svg> </div>