Necesito hacer que la flecha del círculo gire para que se muestre como un control giratorio antes de cargar contenido en mi aplicación de reacción.
Hice algo como esto usando transform:rotate como se muestra a continuación
@keyframes antiClockwiseSpin { from { transform: rotate(360deg); } to { transform: rotate(0deg); } } .antiClockwiseSpin { animation-duration: 10s; animation-iteration-count: infinite; animation-name: antiClockwiseSpin; animation-timing-function: linear; } .wrapper { display: flex; justify-content: space-between; max-width: 500px; margin: 0 auto; } <div class="wrapper"> <div class="box antiClockwiseSpin"> <img class="image" src="https://i.stack.imgur.com/8s5ds.png" alt="" width="120" height="120"> </div> </div>Pero de alguna manera toda la imagen gira, pero lo que quiero es girar solo el círculo. Encuentre la imagen de esos por separado como se indica si es necesario.
https://i.stack.imgur.com/hMTmj.png?s=256
https://i.stack.imgur.com/suvmP.png?s=256
Me gustaría saber si podemos traer ese círculo incluso sin imagen pero a través de css simple
necesita una imagen de flecha transparente Dé la posición: relativa al padre (imagen de la persona) y la posición: absoluta al elemento secundario (flecha transparente), luego puede colocarla en la parte superior: 0 izquierda: 0 para superposición.
Hazlo como a continuación:
.box { width: 120px; /* control the size */ display: inline-grid; } .box img { grid-area: 1/1; /* images above each other */ mix-blend-mode: darken; /* needed to remove the white background */ } .box img:last-child { animation: r 2s linear infinite; transform-origin: 48% 47%; } @keyframes r { to { transform: rotate(-360deg) } } <div class="box"> <img src="https://i.stack.imgur.com/suvmP.png?s=256"> <img src="https://i.stack.imgur.com/hMTmj.png?s=256"> </div>