Crea arte animado de CSS

Feb 3, 2026

Cómo

[dieciséis] (Crédito de la imagen: Tiffany Choong)

Crear imágenes CSS es una forma divertida de practicar tus habilidades y crear una obra de arte limpia. Es un buen descanso del habitual peinado día a día de los componentes web. Todo lo que deberá comenzar es un documento en blanco y un archivo CSS; Recomendamos usar SASS, que le permitirá reutilizar sus estilos y escribir selectores más simples (consulte nuestra Guía para ¿Qué es el SASS? para aprender más sobre este preprocesador).

Comenzaremos con algunos consejos principales para dominar el arte CSS, luego le mostraremos cómo recrear este globo animado Pikachu usando solo CSS (asegúrese de mantener sus archivos seguros en decente almacenamiento en la nube ).

Para más inspiración, explore nuestro rodeo de increíble. Ejemplos de animación CSS . ¿Después de algo más básico? Empezar por aprender Cómo crear una paleta de hielo usando CSS .

O, si está empezando un nuevo sitio, abandona la complejidad con un brillante Creador de sitios web y asegúrate de conseguir tu Alojamiento web Correcto.

Reducir el diseño a formas simples.

Al crear arte de CSS, puede ayudar a ver algunas imágenes de referencia para inspirarse y luego crear una variación de dibujos animados simplificada a medida que avanza, imaginando el sujeto utilizando formas primitivas, que hacen mejor Formas CSS .

Use un fondo brillante para ayudar con el posicionamiento.

Cuando se superponen formas de colores similares, es difícil ver a dónde se están colocando o cómo se ven. Es útil tener la forma que está trabajando en destacarse cambiando el color de fondo A algo brillante y alegre, como Magenta. Esto le permite ver fácilmente la posición exacta y la forma de su elemento.

Usar tamaños de fluidos

Cuando se trata de definir un valor PX para propiedades, recomendaríamos usar la unidad REM. En el caso de que decida que desea que su pieza general sea más grande o más pequeña, usando unidades REM, solo tiene que cambiar la base html {font-size: ... px} en su sass para escalar toda la obra de arte hacia arriba o hacia abajo.

Al definir las alturas y los anchos de los elementos infantiles que deben tener un tamaño relativo al padre, los porcentajes son útiles. Dado que estos valores siempre son relativos a sus padres, también deben escalar con el Tamaño de fuente HTML .

01. Comenzar con contenedores.

Un contenedor de envoltura para mantener las piezas de la obra es un buen lugar para comenzar. Dentro del contenedor, podemos colocar tres contenedores internos, la cabeza, el cuerpo y los globos.

 & lt; div clase = "contenedor" y gt;
& lt; div clase = "cabeza" & gt; & lt; / div & gt;
& lt; div clase = "cuerpo" & gt; / lt; / DIV & GT;
& lt; div clase = "globos" y gt; / lt; / div & gt;
& lt; / DIV & GT;

El contenedor debe ser generalmente Posición: Relativo para permitir que otros elementos se coloquen relativamente dentro de ella usando Posición: Absolute y tenga una altura y anchura bien definidos, de lo contrario, el posicionamiento de los elementos infantiles se vuelve difícil.

En sus estilos, agregue sus colores base como variables de SASS para su reutilización. El sass aligerar() y oscurecer() Las funciones crearán tintes y tonos de sus colores, que se pueden usar como puntos destacados o sombras para su personaje.

02. Estilo la cabeza

Con la estructura se calificó, primero vamos a diseñar la cabeza. En este caso, la cabeza hace un buen punto central para la obra de arte, por lo que en lugar de establecer su posición para absolutos, se puede establecer en relación con el pariente. Esto permite que el contenedor tenga un elemento estable dentro de ella, lo que le da a los otros elementos absolutos flotantes un punto de anclaje y, por lo tanto, más control sobre su posición.

Las características faciales necesitarán un contenedor para posicionar, así que cree un & lt; div & gt; Dentro del recipiente de la cabeza para la forma amarilla con un color de ancho, altura y fondo, ahora hagamos que este rectángulo se vea más como una forma de cabeza. Una de las propiedades más comunes y útiles en el arte de CSS es el borde fronterizo La propiedad, que cambia la curva de la X o Y de las esquinas de un cuadro y se puede usar para crear más formas orgánicas.

Usando esta técnica con un combo REM y porcentaje, puede hacer formas similares a los blob en lugar de simplemente elipses simples, que escalan naturalmente con el html {Tamaño de fuente: ... px} :

 .face {
borde-top-izquierda-radio: 50% 4.5REM;
Border-Top-Derecha-Radio: 50% 4.5REM;
Frontera-fondo-izquierda-radio: 50% 3REM;
Frontera-fondo-derecha-radio: 50% 3REM;
...
}

Después de perfeccionar la cabeza. borde fronterizo , coloque el resto de las características faciales como elementos infantiles de la cabeza, como los ojos, las mejillas, la nariz y las orejas. Como la cabeza, la borde fronterizo truco vendrá útil desde entonces Radio de borde: 50%. Puede que no se vea atractivo.

03. pasar al cuerpo

Un cuerpo & lt; div & gt; se puede colocar dentro del recipiente del cuerpo detrás de la cabeza y se forma con el mismo borde fronterizo Técnica, así como los brazos, piernas y cola. Para permitir la superposición adecuada, el cuerpo real debe ser su propio elemento, ya que ciertos elementos internos como las rayas posteriores deberán cortarse con Desbordamiento: oculto . Para darle más profundidad al cuerpo, el Transformar: sesgo () La propiedad puede pura el cuerpo ligeramente.

La cola de rayos se puede construir utilizando tres rectángulos separados en lugar de tratar de formar esta forma de un elemento. Los rectángulos se pueden girar y posicionarse sobre la parte superior del otro para formar un perno. Los brazos y las piernas pueden usar el color primario más oscuro que creamos usando SASS oscurecer() Así que se destacan.

04. Añadir globos

Ahora que se completa el ratón eléctrico, vamos a atar los globos a su espalda. Añadir algunos & lt; div & gt; s con estilos compartidos con una cuerda infantil & lt; div & gt; y posicionarlos en la cabeza. La cadena es invisible excepto un frontera , que ayuda a que se vea más de cuerda.

Para atar la cuerda alrededor de la cintura del personaje, un & lt; div & gt; Se puede colocar dentro del cuerpo para permitir el posicionamiento adecuado. La cadena necesita una ligera curva para aparecer como si estuviera atada alrededor del cuerpo, por lo que puede tener una pequeña altura, fronteriza y un fronteriza Radio izquierdo y derecho, que hace una línea curva delgada:

 .string {
Altura: 1REM;
Ancho: 9REM;
Frontera-derecha: sólido 1px $ blanco;
Frontera-izquierda: sólido 1px $ blanco;
Frontera-fondo: sólido 1px $ blanco;
Frontera-Fondo-Izquierda-Radio: 50% 1Rem;
Frontera-fondo-derecha-radio: 50% 1Rem;
}

05. Animar el CSS.

Podemos dar la vida de carácter agregando @keyframes animaciones Los brazos, piernas, orejas y cola se pueden animar con Transformar: Girar () . Asegurar la de transformación se establece en la 'articulación' (es decir, centro superior para una pierna) y ajuste la rotación. Este tipo de animación se puede utilizar varias veces en una mezcla de SASS:

 @Mixin Animaterotate ($ nombre, $ start, $ End) {
@keyframes # {$ nombre} {
0%, 100% {transform: rotate (# {$ start} deg)}
50% {Transform: Gire (# {$ FIND} DEG)}
}
}

Finalmente, agregando un 5S lento. Transform: traducey () La animación del fotograma clave animará al personaje hacia arriba y hacia abajo como si estuviera flotando. Para un toque de realismo, una animación parpadeante usando Transformada: CANCIALIA (0.1) La propiedad se puede utilizar para que aparezca, aunque los ojos se cierren.

Este artículo fue publicado originalmente en Creative Web Design Magazine neto . Comprar emito 283 o suscribir .

Leer más:

5 cosas que nunca conocías acerca de CSS
Añadir filtros SVG con CSS
Cómo codificar efectos de texto inteligentes con CSS

Crea arte animado de CSS

01. Comenzar con contenedores.

02. Estilo la cabeza

03. pasar al cuerpo

04. Añadir globos

05. Animar el CSS.

Cómo - Artículos más populares

Cómo limpiar los pinceles: la guía definitiva

Trabaja inteligente con tu ZBrush ui

Construye terreno en Houdini 17

Pinte el arte expresivo de retratos con Artrage 5

Ilumina su trabajo 3D con luces de cúpula

Comienza con WebGL usando tres.js

Cómo codificar un marcador de realidad aumentada

Crea pinceles personalizados en pintura de estudio de clip

Categorías