Tengo un archivo .gif en mi sitio que me gustaría editar para poder tener un filtro de cambio de tono constante sobre él, pero si alguien hiciera clic y lo arrastrara, aparecería como normal, ¿alguien puede ayudarme, por favor?
No quiero que solo haya un arco iris en capas en mi gif, sino que necesito que cambie constantemente de tono como un arco iris si eso tiene sentido.
He tratado de averiguarlo pero no puedo. también lo siento por cualquier mal inglés
La solución a tu problema no es tan difícil como crees. Solo requiere una 'animación' CSS con @keyframes que cambia los colores en su imagen a través filter: hue-rotate(...) , a menos que la imagen se desplace o se active con el mouse/toque.
retazo
/* keep rotating the filter unless the image is hovered or activated... */ .filtered:not(:where(:hover, :active)) { animation: animated-filter 3s infinite; } @keyframes animated-filter { 0% { filter: hue-rotate( 0deg) } 50% { filter: hue-rotate(360deg) } 100% { filter: hue-rotate( 0deg) } } /* Just eye-candy for the demo */ .wrapper { width: 16rem; height: 16rem; } .wrapper img { display: block; width: 100%; object-fit: cover; } <div class="wrapper"> <img class="filtered" src="https://picsum.photos/320?random=1"> </div>