¿Cómo compartir cualquier efecto de animación lowpoly con CSS3?
Este es el efecto de combinar lowpoly (estilo de polígono bajo) usando propiedades de animación CSS3. Utiliza principalmente la rotación, traducción y escala de las propiedades de transformación CSS3, y la parte del código CSS es muy simple. Lo único interesante es usar el enésimo tipo de selector, los diseñadores de UI no deben desanimarse por esto. La parte CSS se puede reutilizar y los parámetros se pueden cambiar a voluntad según sus propios requisitos (los códigos de animación SVG que no se pueden reutilizar son simplemente pícaros. Luego, los diseñadores de UI pueden usar sus armas de IA familiares para lograr perfectamente los siguientes efectos).
Desmontaje paso a paso:
1. Haz una imagen de estilo poligonal bajo
Mi imagen original es la siguiente:
Lo descargué de la computadora, encontré una imagen de fondo y usé un triangulador de imágenes de artefactos. Tengo que pensar que esta herramienta es realmente útil. Todo lo que el diseñador debe hacer es agregar puntos a la imagen (agregué los vértices aproximadamente solo para probar, si necesito obtener un efecto brillante, necesito agregarlos con cuidado en los bordes donde se separan la luz y la oscuridad).
Luego, el archivo pdf exportado se puede abrir con IA.
2. Procesamiento de imágenes
Esto requiere una operación importante en IA, "liberar la máscara de recorte". Si no hace esto, habrá muchas etiquetas de máscara de recorte de ruta Después de soltar el trazado de recorte, podrás ver que la imagen está compuesta por bloques de colores triangulares. Al exportar código SVG, puede ver etiquetas de polígonos densos El triangulador de imágenes genera imágenes de estilo de polígonos bajos; procesamiento de inteligencia artificial, liberando máscaras de recorte Debería Tenga en cuenta aquí que el PDF generado por el software contiene mapas base sin procesar, mientras que el archivo SVG contiene 3. Procese la imagen de fondo de bajo polígono generada en línea. Si solo necesita una imagen de fondo, puede personalizar el tamaño, el color y el tamaño de la matriz de puntos, y admitir la generación de formato SVG. Por ejemplo, el siguiente contenido: La imagen generada por esta herramienta en línea En este punto, nuestra parte de procesamiento de gráficos ha finalizado y lo que queda es la implementación de la animación. efecto. 4. Animación CSS3 Hablemos primero de la idea original de monetizar la animación. Espero que estos fragmentos poligonales generados cambien en rotación, desplazamiento y tamaño. Este también es un efecto que es fácil de lograr con CSS, pero lo que necesito son diferentes efectos de dispersión, diferentes direcciones de desplazamiento, diferentes distancias y diferentes escalas. Y en mi JavaScript no puedo escribir una función aleatoria. Afortunadamente, CSS3 proporciona un potente selector de tipo n (an b), con el que puedo dar diferentes. Un vistazo rápido a n-de-tipo(an b), donde n comienza en 0 y luego suma 1, le da los elementos a b, 2a b y 3a b. Por ejemplo, quiero mi polygon:n-of-type(6n 1){ transform: Translate(x,y)scale()rotate();} que es El efecto de animación de polígonos en el orden 6n 1 (es decir, 1, 7, 13, 19). De manera similar, el siguiente grupo es un polígono: n de tipo (6n 2), es decir, seleccione el 2.º, 8.º y 6544.º. Ahora adjunta todo el código y comentarios. Combina todos los códigos siguientes: lthtml gt lthead gt ltstyle gt /*The A continuación se muestran las secciones de código CSS reutilizable*/ . Portada { Posición: absoluta; Ancho: 800px Alto: 445px arriba: 20; Izquierda: 20; z index: 2; } /*Las posiciones de ancho y alto de portada y svg son las mismas, la única diferencia es el atributo de índice z*/ svg { Posición: absoluta; Ancho: 800 px Alto: 445 px arriba: 20; Izquierda: 20 Desbordamiento: visible índice z: } Polígono{ Transición: todos los 1 son fáciles; Transformación - Origen: 50 50; } /*Se establecen los siguientes seis conjuntos de efectos de animación*/ . portada: hover SVG # polígono de baja poli: n-de-tipo (6n 1) { Transformación: traducción (-400, -400) escala (1,5) rotación (100 grados); Opacidad: .3 } . portada: hover SVG # polígono de baja poli: n-de-tipo (6n 2) { Transformación: traducción (800, -400) escala (1.1) rotación (200 grados); Opacidad: .4; } . portada: hover svg #lowpolyPolygon: n tipos (6n 3) { Transformación: traducción (-800, 400) escala (1.2) rotación (200 grados); Sin transparencia: .3; } . portada: hover svg #lowpolyPolygon: n tipos (6n 4) { Transformación: traducción (-400, 800) escala (1.4) rotación (200 grados); Sin transparencia: 4 } . portada: hover SVG # polígono de baja poli: n-de-tipo (6n 5) { Transformación: traducción (400, 400) escala (1.3) rotación (100 grados); Opacidad: .3 } . portada: hover svg #lowpolyPolygon: n tipos (6n 6) { Transformación: traducción (800, 400) escala (1.2) rotación (200 grados); opacidad:. } lt/estilo gt; lt/cabeza gt; ltbody gt ltp class="cubierta" > lt/p lt; - áreas de activación definidas - gt; ltsvg gt ltg id="lowpoly " Aquí hay algunos lt/ g gt; lt/SVG gt; lt/body gt; lt/html gt; Dado que SVG se divide en pantalla completa después del efecto de animación, si nuestra animación está configurada para interrumpirse cuando se mueve el mouse, el mouse sale Para el efecto de restauración, necesitamos un área para desencadenar la acción. Este es el significado de definir cobertura, los atributos jerárquicos son más altos que los atributos SVG. En cuanto a la activación de los efectos de animación, uso: coloque el mouse sobre. Si necesita otros eventos de activación, puede pedir ayuda al front-end Siege Lion. La propiedad de desbordamiento de svg debe definirse como visible para garantizar que la parte que excede el tamaño de svg sea visible después de la animación. Con respecto a la configuración de los atributos de animación de polígonos, esta transición: facilidad de todos 1 significa que todo el tiempo de animación es 1 s, que es un efecto de cámara lenta. Origen de transformación: 50 50 define el origen de la transformación como el centro de cada elemento. Para seis efectos de animación diferentes, configuro la traducción, la escala, la rotación de la selección y el cambio de transparencia. Aquí, sugiero que defina un rango para el desplazamiento del eje X y del eje Y. Cuanto mayor sea el valor, mayor será el diferencial. Por ejemplo, mis direcciones X e Y son -800~800. Además, con respecto al ángulo de rotación, rotar (), para cumplir con las leyes de la física, cuanto más lejos esté la trayectoria de desplazamiento, mayor será el ángulo de rotación y viceversa. Si desea establecer más efectos diferentes, simplemente cambie el coeficiente A de n en n-de-tipo (an b). Si eres demasiado vago para intentar modificarlo, el diseñador de la interfaz de usuario solo necesita hacerlo tú mismo (o generarlo automáticamente) Resumen de puntos de conocimiento 1. Acerca de hacer imágenes con polígonos bajos (concéntrate en crear gráficos arbitrarios para ti) 2. Usa el tipo enésimo (an b) en 2. Selector CSS3.