Cómo crear un hermoso contorno animado para cada contenedor con división

Las opciones de animación de Divic han ayudado a dar vida a numerosos sitios web sin la necesidad de un código personalizado. Las configuraciones de animación construidas son extremadamente ajustables y le permiten crear modelos verdaderamente únicos. Una de las cosas que puede hacer, por ejemplo, es crear un contorno animado. Esto es exactamente lo que le mostraremos en esta publicación. Agregaremos un borde a cada contenedor y agregaremos configuraciones de animación que corresponden al flujo de cada elemento. ¡Podrá descargar el archivo JSON de forma gratuita! Vamos a eso. Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo rápido al resultado en todas las dimensiones de la pantalla.
Escritorio

Móvil

Descargue el esquema animado de forma gratuita para poner su mano en el esquema animado gratuito, primero deberá descargarlo usando el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia.
Te has suscripto satisfactoriamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos! Suscríbase a nuestro canal de YouTube para comenzar a recrear Agregar un nuevo color de fondo. Comience agregando una nueva secciones comunes en la página en la que trabaja y use un color de fondo blanco.
Color de fondo: #ffffff
Espacio ir a la pestaña de diseño y agregar algunos valores de margen y llenado personalizados.

Margen superior: 3VW
Margen inferior: 3VW
Margen izquierdo: 3VW
Margen derecho: 3VW
Revestimiento superior: 3VW
Revestimiento inferior: 3VW
Border luego abra la configuración del borde y agregue “2VW” a cada esquina. Use un borde también.

Ancho fronterizo: 1 PX
Color del borde: # 000000
Animation agrega una animación personalizada.

Estilo de animación: diapositiva
Dirección de la animación: Down
Opacidad de animación para comenzar: 100%
Visibilidad Para garantizar que nada exceda el contenedor de la sección, ocultaremos los derrames en la configuración de visibilidad de la sección.

Desbordamiento horizontal: oculto
Desbordamiento verticalmente: oculto
Agregue una nueva estructura de columna de fila Continúe agregando una nueva línea a la sección utilizando la siguiente estructura de columna:

Dimensión sin agregar módulos, abra la configuración de la fila y cambie la configuración de tamaño en consecuencia:

Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 2
Ancho: 94%
Ancho máximo: 100%
Espacio agregue algunos valores de llenado personalizados.

Revestimiento superior: 3VW
Revestimiento inferior: 3VW
Junta izquierda: 3VW
Junta derecha: 3VW
El borde vaya a la configuración del borde y agregue “2VW” a cada esquina. Agregue un borde.

Color del borde: # 000000
La animación también agregue una animación seguida.
Estilo de animación: diapositiva

Dirección de Animación: Up
Retraso de animación: 500 ms
Opacidad de animación para comenzar: 100%
La visibilidad y para garantizar que la animación de la columna (que agregaremos más tarde) funcione, haremos visibles las filas que fluyen.
Desbordamiento horizontal: visible

Desbordamiento vertical: visible
Configuración de la columna 1 Continuar abriendo la configuración de la primera columna.
El borde vaya a la pestaña de diseño, agregue “2VW” a cada una de las esquinas y use un borde.

Ancho fronterizo: 1 PX

Color del borde: # 000000

Animación Complete la configuración de la columna agregando una animación personalizada.
Estilo de animación: diapositiva

Dirección de la animación: Down
Animación de retraso: 1000 ms
Opacidad de animación para comenzar: 100%
¡Agregue los módulos de blurb a la columna 1 Agregar contenido es hora de comenzar a agregar módulos! El primero que necesitamos es un módulo de propaganda. Ingrese un contenido de su elección.
Seleccione el icono Seleccione un icono adicional.

Icono de configuración Vaya a la pestaña Diseño y modifique la configuración del icono en consecuencia:

Icono de color: # 000000

Colocando iconos: arriba
Use el icono del tamaño de la fuente: sí
Icono de tamaño de fuente: 6VW (escritorio), 8VW (tableta), 10VW (teléfono)
Configuración de texto de título Modificar y configuración para el texto del título.
Título de la fuente: Poppins

Fuente de peso del título: Ultra Bold
Alineación del texto del título: Centro
Título Tamaño del texto: 1.2VW (escritorio), 2.5VW (tableta), 3VW (teléfono)
Configuración de texto del cuerpo junto con la configuración de texto de su cuerpo.
Font Corps: Sansalinización abierta del texto del cuerpo: Centro

Tamaño de texto del cuerpo: 0.8VW (escritorio), 1.7VW (tableta), 2.3VW (teléfono)
El espacio crea espacio alrededor del módulo de la propaganda agregando valores de espaciado personalizados en diferentes tamaños de pantalla.
Margen superior: 3VW
Margen inferior: 3VW

Margen izquierdo: 3VW
Margen derecho: 3VW
Revelaje superior: 10 VW (escritorio), 18 VW (tableta y teléfono)
Bajo forro: 10 VW (escritorio), 18 VW (tableta y teléfono)
ENLIZACIÓN IZQUIERDA: 2VW (escritorio), 8VW (tableta y teléfono)
Revestimiento derecho: 2VW (escritorio), 8VW (tableta y teléfono)
El borde vaya a la configuración del borde, agregue “2VW” a cada esquina y use un borde.
Ancho fronterizo: 1 PX
Color del borde: # 000000

Animación Completa el diseño del módulo de propaganda agregando una animación personalizada.
Estilo de animación: diapositiva
Dirección de la animación: Down

Duración de la animación: 1300 ms
Retraso de animación: 1200 ms
Intensidad de animación: 60%
Opacidad de animación para comenzar: 100%
Animación de iconos: sin animación
Agregue el módulo de botón a la columna 1 Agregue una copia Pase al siguiente y último módulo, que es un módulo de botón. Ingrese una copia de su elección.
Alineación Vaya a la pestaña Diseño y cambie la alineación.
Alineación de botones: centro

Botón de configuración y luego cambie la configuración de los botones.

Use estilos personalizados para el botón: Sí
Tamaño de texto de texto: 0.8VW (escritorio), 1.5VW (tableta), 2.2VW (teléfono)

El color del texto del botón: # 000000
El color del fondo del botón: #ffffff
El ancho del nudo del botón: 1 PX
Cenas de libros: # 000000
Butter Rasse: 50VW
Botón de fuente: Abrir sans
Peso de fuente de fuente: Ultra Bold
El estilo de la fuente del botón: mayúscula
Espacio y forma el módulo de botón utilizando valores de espaciado personalizados en diferentes tamaños de pantalla. Matrimonio superior: -5VW (escritorio), -6.5VW (tableta), -7VW (teléfono)
Margen inferior: 2 VW (escritorio), 3VW (tableta y teléfono)
Revelaje superior: 1VW (escritorio), 2VW (tableta y teléfono)


Bajo forro: 1VW (escritorio), 2VW (tableta y teléfono)
ENLIZACIÓN IZQUIERDA: 5VW (escritorio), 8VW (tableta y teléfono)
Revestimiento derecho: 5VW (escritorio), 8VW (tableta y teléfono)
Animación Completa el diseño del módulo de botones agregando una animación personalizada.
Estilo de animación: diapositiva
Dirección de Animación: Up
Retraso de animación: 1400 ms

Animación de intensidad: 200%
Opacidad de animación para comenzar: 100%
Retire la columna 2 y el clon Columna 1 Después de haber completado la columna 1 y los módulos en ella, puede eliminar la segunda columna (vacía) y el primer clon. ¡Cambie todo el contenido del módulo de propaganda para que coincida con su sitio y haya terminado!
Vista previa ahora que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla. Escritorio
Móvil