0
401
VistasCómo hacer que el texto tenga un color diferente al superponerse en HTML/CSS/JS
Me gustaría hacer algunas animaciones con texto y para los colores, me gustaría que el color del texto cambie según el fondo (los objetos que se superponen). Sin embargo, el efecto que busco no funciona simplemente con la opacidad, ya que me gustaría un color completamente diferente.
Por ejemplo: 
Tenga en cuenta que hice este ejemplo usando GIMP. También tenga en cuenta que el texto no siempre estaría alineado/superpuesto de esta manera, sino solo durante una animación.
¿Este efecto es relativamente fácil de hacer o requeriría bibliotecas y códigos JavaScript complejos?
2 Respuestas
Responde la pregunta0
Aquí hay un ejemplo del tipo de cosas que se pueden hacer usando el modo mix-blend.
Este fragmento solo usa la diferencia: tendrá que probar diferentes métodos según las combinaciones de colores que desee.
Usando la diferencia en los dos bits de texto y colocándolos sobre un fondo blanco y haciendo que los textos sean amarillos para empezar, los convierte en una especie de azul y luego, cuando el texto animado toca el fondo azulado, obtenemos un tono más claro.
Me temo que nunca he encontrado una forma simple y algorítmica de decidir qué valores se deben dar al modo de mezcla y siempre termino experimentando.
.container { width: 100vw; height: 10em; background-image: linear-gradient(-45deg, #5920d6 0 40%, transparent 40% 100%); background-color: white; overflow: hidden; position: relative; display: inline-block; } .container>* { color: #5920d6; color: yellow; font-family: sans-serif; font-size: 3em; mix-blend-mode: difference; } .static { position: absolute; top: 40%; display: inline-block; color: yellow; } .move { position: absolute; animation: move 10s linear infinite; top: calc(40% + 0.25em); color: yellow; } @keyframes move { 0% { transform: translate(0, -0.1em); } 100% { transform: translate(50vw, -0.1em); } } <div class="container"> <div class="static">Some text</div> <div class="move">Hello World</div> </div>0
Puede leer más sobre la animación CSS en la web de w3school: