¿Recuerdas las caricaturas que vimos de niño? En ese momento eran la personificación de la animación. Ahora la animación no es solo dibujos animados, sino que nos encontramos casi todos los días, revisando el teléfono o usando cualquier dispositivo que tenga una pantalla.
Hoy en día, la animación se usa no solo para atraer la atención, sino también para mejorar la interacción del usuario y facilitar la navegación. En cualquier buen diseño, la animación se agrega de tal manera que se combina con el concepto general, creando así una interfaz de usuario conveniente.
En este artículo, crearemos una animación simple de la cara con diferentes expresiones, y en el proceso aprenderemos un poco sobre CSS.
Empecemos
Utilizaremos la técnica CSS, que rara vez usan los desarrolladores web, pero a la que recurren los diseñadores. Se llama enmascaramiento.
¿Qué te viene a la mente cuando escuchas las palabras "máscara"? Probablemente has imaginado algo que oscurece la esencia. Eso es todo lo que necesitamos saber.
Espera, pero el artículo trata sobre cómo escribir y usar animaciones CSS ... ¡Sin pánico! De acuerdo!
Crea una máscara base
Supongamos que tenemos una etiqueta
div con
background: green; y se parece a esto:
También hay un archivo
face.svg :
Si aplicamos la propiedad CSS
mask-image: url (face.svg); a la etiqueta
div , entonces te sorprenderá ver el resultado:
Puedes pensar que esto es extraño. La imagen face.svg se colocó encima del
div , pero tomó un color de fondo. Esto es contrario a nuestras expectativas. Esto sucede debido a la propiedad de
mask-type , que hace que la parte opaca de svg sea transparente. Por lo tanto, el color de fondo se vuelve visible.
No profundicemos. Solo tenga en cuenta que puede usar
background-color para cambiar el color de la máscara. Si está familiarizado con los diversos usos del
background-color de
background-color , también puede aplicar degradados y escribir un degradado simple que llene el centro de rojo y se extienda radialmente negro alrededor de los bordes. El código se verá así:
background-image: -webkit-radial-gradient( hsla(0, 100%, 50%, .7), hsla(0, 100%, 20%, .8), hsla(0, 100%, 10%, 1));
El resultado será así:
Agregar animación
Ahora agregue animación a esta cara vacía. Para hacer esto, use
expression.svg , que puede ver en la imagen a continuación. Para simplificar, creé todos los archivos svg del mismo ancho y alto, para no tener que alinear caras y expresiones manualmente.
Ahora
mask-image tiene una opción genial que te permite usar múltiples imágenes como máscaras. Por lo tanto, podemos hacer esto:
mask-image: url (face.svg), url (expression.svg); . Esto es lo que sucedió:
Una de las propiedades más importantes de las máscaras CSS es
mask-position , debido a que la máscara se encuentra en la esquina superior izquierda en relación con el elemento padre. Y puedo organizar varias máscaras usando la propiedad de
mask-position mask-image al igual que
mask-image . Para poner una cara triste, use algo como esto:
mask-position: 0 0, 0 12px; . Esto es lo que pasó.
La primera posición es
0 0 para
face.svg , y la segunda
0 12px es para
expression.svg . Esto llevó a una transferencia de 12px y le dio a la cara la expresión necesaria.
Aplicando Funcionalidad
Ahora animemos estas expresiones al pasar el mouse por encima. El código completo que obtenemos después de aplicar la pseudo-clase hover será así:
i { background-image: -webkit-radial-gradient(hsla(0, 100%, 50%, .7), hsla(0, 100%, 20%, .8) 60%, hsla(0, 100%, 10%, 1)); mask-image: url('face.svg'), url('expression.svg'); mask-position: 0 0, 0 12px; transition: mask-position .5s ease-out; } i:hover { background-image: -webkit-radial-gradient(hsla(120, 100%, 50%, .7), hsla(120, 100%, 20%, .8) 60%, hsla(120, 100%, 10%, 1)); mask-position: 0 0, 0 0; transition: mask-position .1s linear; }
Después de jugar un poco más con las propiedades CSS, podemos hacer esto:
Este es uno de los métodos que puede utilizar para crear animaciones muy emocionantes que encontramos casi a diario.
Un punto importante
El enmascaramiento puede no funcionar en todos los navegadores. Para que funcione en todos los navegadores, simplemente agregue etiquetas especiales del navegador como
-webkit- ,
-moz- y
-moz- .
Puedes ver el código completo en
github y
codepen . Gracias Espero que haya sido útil.
Eche un vistazo a VPS.today , un sitio para encontrar servidores virtuales. 1500 tarifas de 130 anfitriones, una interfaz conveniente y una gran cantidad de criterios para encontrar el mejor servidor virtual.