0
174
ViewsHacer una animación css usando una máscara de degradado transparente
Actualmente estoy haciendo una animación que aplicará una máscara de degradado en una imagen. La máscara es una máscara transparente y se transformará de derecha a izquierda de la imagen. Aquí está mi código.
<!DOCTYPE html> <html> <head> <style> .container { height: 100vh; width: 100vw; background-color: white; position: relative; } .first { background-image: url('https://i.ibb.co/17zzm7P/flower.jpg'); background-size:cover; position: absolute; height: 100%; width: 100%; -webkit-mask-image: linear-gradient(to left, transparent 0px, black 20rem, black); -webkit-animation: rightToLeft 5s forwards; } @keyframes rightToLeft { 0% { -webkit-mask-position: 100vw 0%; mask-position: 100vw 0%; } 100% { -webkit-mask-position: 0vw 0vw; mask-position: 0vw 0vw; } } </style> </head> <body> <div class="container"> <div id="first" class="first"> </div> </div> </body> </html>Básicamente, la animación funciona bien. Sin embargo, la imagen de la máscara solo se aplica a un área específica cuando se mueve de derecha a izquierda. Debido a que la máscara es transparente, espero que cuando se mueva a la nueva área, el área anterior por la que pasó también sea transparente. ¿Cómo puedo hacer para que el área anterior también sea transparente?
Muchísimas gracias por su tiempo.
·
Juan Pablo Isaza
1 answers
Answer question0
Estás casi bien, solo necesitas deshabilitar la repetición usando mask-repeat: no-repeat
.container { height: 100vh; background-color: white; position: relative; } .first { background-image: url('https://i.ibb.co/17zzm7P/flower.jpg'); background-size: cover; position: absolute; height: 100%; width: 100%; -webkit-mask-image: linear-gradient(to left, transparent, black 20rem); -webkit-mask-repeat: no-repeat; -webkit-animation: rightToLeft 5s forwards; } @keyframes rightToLeft { 0% { -webkit-mask-position: 100vw 0%; mask-position: 100vw 0%; } 100% { -webkit-mask-position: 0vw 0vw; mask-position: 0vw 0vw; } } body { margin:0; } <div class="container"> <div id="first" class="first"> </div> </div>
·
Juan Pablo Isaza
Report
Answer question