Hola te quedo muy bien, vengo de platzi y estoy empezando a aprender sobre css,
y se me hizo interesante este tema, no sabía que se podía dibujar con css, bueno quería preguntar si es posible hacer que cada cierto tiempo parpadee la calabaza y si es así, con cuales reglas de css que se necesitan
¡Gracias por este artículo y sualudos!
Hola Brandon. Me alegra que hayas leído el artículos y claro que se puede hacer que parpadee, se me ocurre agregarle a los ojos algo así:
.face, .face::after {
opacity: 1;
animation-name: blink;
animation-duration: 2s;
animation-iteration-count: infinite;
}
Y los keyframes quedarían así:
@keyframes blink {
0% {opacity: 1;}
90% {opacity: 1;}
100% {opacity: 0;}
}
Hola, si me funcionó, pero parpadeaba también la boca, entonces intenté arreglarlo e investigué algunas reglas de css, y le agregue otras cosas pero quedó mas o menos bien jajaja
Nomás le pasó algo raro a la boca y no sé por qué...
Y por cierto, gracias por el código y tu ayuda 😃
Ya ahora sí creo que quedó, no sé si utilicé el transform-origin como debe ser, pero al parecer funcionó jajajaja
Le agregué transform-origin: 200%; y le moví unos pixeles por que no quedaba en el centro... El enlace es el mismo por si quieres ver el gif de como quedó y los cambios del código ya actualizado: drive.google.com/drive/folders/1-N...
¡Muchas gracias aprendí mucho con lo que me dijiste, los códigos que me pasaste y este post! 😄
brandonargel.github.io/Animated-Pu...
Muchas gracias nuevamente, no lo había subido por que estaba aprendiendo sobre Git y GitHub y también tenía otros pequeños proyectos 😃
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Hola te quedo muy bien, vengo de platzi y estoy empezando a aprender sobre css,
y se me hizo interesante este tema, no sabía que se podía dibujar con css, bueno quería preguntar si es posible hacer que cada cierto tiempo parpadee la calabaza y si es así, con cuales reglas de css que se necesitan
¡Gracias por este artículo y sualudos!
Hola Brandon. Me alegra que hayas leído el artículos y claro que se puede hacer que parpadee, se me ocurre agregarle a los ojos algo así:
.face, .face::after {
opacity: 1;
animation-name: blink;
animation-duration: 2s;
animation-iteration-count: infinite;
}
Y los keyframes quedarían así:
@keyframes blink {
0% {opacity: 1;}
90% {opacity: 1;}
100% {opacity: 0;}
}
Te mando un saludo :)
Hola, si me funcionó, pero parpadeaba también la boca, entonces intenté arreglarlo e investigué algunas reglas de css, y le agregue otras cosas pero quedó mas o menos bien jajaja
Nomás le pasó algo raro a la boca y no sé por qué...
Y por cierto, gracias por el código y tu ayuda 😃
Buen uso del :not 🤩
Veo que el origen de la animación de la boca está desfasado, pudiera usarse la propieda transform-origin para ajustarlo
Ya ahora sí creo que quedó, no sé si utilicé el transform-origin como debe ser, pero al parecer funcionó jajajaja
Le agregué transform-origin: 200%; y le moví unos pixeles por que no quedaba en el centro... El enlace es el mismo por si quieres ver el gif de como quedó y los cambios del código ya actualizado: drive.google.com/drive/folders/1-N...
¡Muchas gracias aprendí mucho con lo que me dijiste, los códigos que me pasaste y este post! 😄
Te quedó genial 👏me da gusto que te hayas llevado algo de valor. Deberías de subirlo con github pages para que más gente lo pueda ver :)
brandonargel.github.io/Animated-Pu...
Muchas gracias nuevamente, no lo había subido por que estaba aprendiendo sobre Git y GitHub y también tenía otros pequeños proyectos 😃