[CSS] animación de ruta svg
Mueve un cuadrado a lo largo del camino dado.
Si la trayectoria del movimiento es irregular, es muy difícil establecer los valores de los atributos superior e izquierdo.
Esto se puede lograr usando svg.
La forma del elemento de ruta está definida por su atributo d.
El valor del atributo d es una secuencia de "comando + parámetro".
Entre ellos M 20 30 L 160 180 contiene dos secuencias de comandos.
M 20 30 significa mover el pincel a las coordenadas 20 y 30,
L 160 180 significa dibujar una línea recta desde la posición actual del pincel hasta las posiciones 160 y 180.
El elemento Ruta admite una variedad de comandos. Puede consultar el comando curva aquí.
El atributo de estilo CSS offset-path del elemento html representa la ruta de desplazamiento.
Al especificar el valor de offset-path como el valor del atributo d del elemento de ruta, podemos mover el elemento a lo largo de una ruta determinada.
Donde distancia-desplazamiento especifica el porcentaje de desplazamiento del elemento desde su posición inicial.
Los efectos de animación se pueden lograr cambiando la distancia de desplazamiento cuadro por cuadro en @keyframes.
Modificamos el atributo D de ruta a m10 80c40 10, 6510, 9580s150 150, 180 80.
Modifique las propiedades de la ruta de desplazamiento del cubo en consecuencia.
Puedes conseguir el efecto de pequeños cuadrados moviéndose a lo largo del camino.
MDN:Ruta
MDN:Ruta de desplazamiento
MDN:Distancia de desplazamiento
Guía de operación de animación SVG
Gráficos vectoriales escalables (SVG) 2 - Capítulo 9: Rutas