Cómo crear márgenes animados superposición para resaltar el contenido con Div

¿Busca una forma única de poner una parte cierta de su página en el centro de atención? ¡Continúa leyendo! Hoy, le mostraremos cómo crear la superposición de bordes animados para resaltar el contenido en su página. Crearemos tres márgenes animados diferentes en la página del paquete de diseño para desarrolladores de aplicaciones, pero puede usar esta técnica para cualquier tipo de sitio web que cree. Definitivamente lo ayudará a agregar un tamaño adicional a su página. Esperemos que este tutorial lo inspire a crear sus propios bordes animados alternativos.
¡Vamos a eso! Vista previa antes de tirar la cabeza en el tutorial, para echar un vistazo rápido al resultado de los tres ejemplos. Puede esperar un resultado similar y un tamaño de pantalla más pequeño. Ejemplo no. 1

Ejemplo no. 2

Ejemplo no. 3

Suscríbase a nuestro canal de YouTube Cree una nueva página utilizando la página del paquete de diseño para los desarrolladores de aplicaciones Lo primero que debe hacer es crear una nueva página utilizando el paquete de diseño para los desarrolladores de aplicaciones.

Sección de Héroe Clone Nuestros dos primeros ejemplos se crean en la sección Hero. Si desea recrear ambos ejemplos, le recomendamos clonar la sección Hero, para que pueda moverse para duplicar para recrear el segundo ejemplo.

Recrear el ejemplo no. 1

¡Agregue una nueva línea a la sección Hero de la estructura de la columna para comenzar a recrear el primer ejemplo! Agregue una nueva fila a la sección especializada utilizando la siguiente estructura de columna:

Agregue un módulo de texto Deje el cuadro de contenido vacío Agregue un nuevo módulo de texto en una fila y asegúrese de dejar el cuadro de contenido. Utilizamos el módulo para sus opciones de diseño construidas, no para mostrar contenido escrito. Acceso a la configuración de espaciado del módulo de texto y le dio al módulo un formulario agregando un revestimiento personalizado desde arriba y abajo. Cree la superposición entre estos módulos y módulos anteriores agregando un margen superior negativo.

Margen superior: -480px
Revestimiento superior: 223 PX
Finamiento inferior: 223 PX
Border luego acceda a la configuración del borde del módulo y agregue un borde a su elección.

Ancho fronterizo: 9 PX
Color del borde: # 0ae2ff
Estilo de borde: principio
Box Shadow también agregue un tono de caja.

Poder de poco claro de la sombra de la caja: 1 px
Poder de extender la sombra de la caja: 15 px
Color de la sombra: RGBA (10,226.255.0.59)
Animación y reproducir con la configuración de animación para que aparezca el contenido.

Estilo de animación: Flip
Repita la animación: una vez
Dirección de la animación: correcto
Duración de animación: 1500 ms
Retraso de animación: 1500 ms
Animación de intensidad: 500%
Recrear el ejemplo no. 2

¡Agregue una nueva línea a la sección duplicada duplicada del héroe, pasamos al segundo ejemplo! Agregue una nueva fila a la sección Héroe duplicada utilizando la siguiente estructura de columna:

Agregue el módulo de texto no. 1 Deje el cuadro de contenido vacío nuevamente, usamos un módulo de texto vacío.

El espacio ir a la configuración del espacio y le dé una forma al módulo utilizando un revestimiento superior e inferior personalizado. Haga que se superponga con los módulos anteriores agregando un margen superior negativo.

Margen superior: -480px
Revestimiento superior: 223 PX
Reinicio inferior: 223 PXfrontier Continúe agregando un borde al módulo de texto.
Ancho fronterizo: 9 PX

Color del borde: # 0ae2ff
Estilo de borde: doble
Animación y reproducir con configuraciones de animación para crear un efecto continuo.
Estilo de animación: Roll

Repita la animación: una vez
Director de Animación: Centro
Duración de animación: 4500 ms
Retraso de animación: 1500 ms
Animación de intensidad: 100%
Opacidad de animación para comenzar: 100%
Clone el módulo de texto después de que haya terminado de cambiar el primer módulo de texto, continúe y clone.
Cambie el espacio Abra la configuración duplicada y cambie el valor del margen superior en la configuración de espaciado.

Margen superior: -495px

Cambie el borde y cambie el color del borde.
Color del borde: #ededed

Cambie la animación y cambie la configuración de animación para obtener el resultado que ha visto en la vista previa de esta publicación.
Repita la animación: bucle

Duración de animación: 5000 ms

Retraso de animación: 2000 ms
Recrear el ejemplo no. 3
¡Cambie el espacio del módulo de imagen en la columna 2, pasamos al siguiente y último ejemplo! Navegue a la sección del proceso en la página y agregue algunos rellenos superiores al módulo de imagen que contiene la gran ilustración media.

Margen superior: 70 PX (escritorio), 0 PX (tableta y teléfono)

Agregue el color de fondo a los módulos de texto existentes Continúe agregando un color de fondo blanco a cada uno de los textos de la primera y tercera columna.
Color de fondo: #ffffff

Agregue un módulo de texto en la columna 1 ¡Deje el cuadro de contenido ahora podemos comenzar a agregar la primera superposición de borde animado! Agregue un nuevo módulo de texto a la primera columna (consulte la pantalla de impresión) y asegúrese de dejar el cuadro de contenido. Acceda a la configuración de espaciado del módulo de texto a continuación y cree la forma y la superposición utilizando el margen personalizado y los valores de relleno.
Margen superior: -230 PX

Margen izquierdo: 80 PX

Margen derecho: 100 PX
Revestimiento superior: 120 PX
Finamiento inferior: 120 PX
Border agregue una ventaja adicional.
Ancho fronterizo: 13 PX
Color del borde: # BCF5F3

Estilo de borde: doble
La animación continúa agregando una animación a su elección, lo que lo ayudará a resaltar el contenido que comparte.
Estilo de animación: pliegue
Repita la animación: una vez

Dirección de la animación: correcto
Animación de intensidad: 100%
El índice Z para garantizar que los bordes aparezcan bajo el contenido, utilizaremos un valor negativo para el índice z del módulo de texto que contiene la configuración de borde.
IND ÍNDICE: -1
Clone el módulo de texto y coloque al final de la columna 1 después de haber terminado de crear y cambiar el módulo de texto, continúe y clono. Coloque el duplicado al final de la primera columna.

Cambie el borde Cambie el color del borde.
Color del borde: # FFC0EC

Cambie la animación y agregue un retraso en la animación.

Animación de retraso: 1000 ms
Agregue un módulo de texto a la columna 3 Deje el cuadro de contenido vacío, continúe agregando un módulo de texto a la tercera columna (consulte la pantalla de impresión) y asegúrese de dejar el cuadro de contenido.

Cambio de espaciado a la configuración de separación y crear forma y superposición utilizando valores de margen y llenado personalizados. Matrimonio superior: -230 PX
Margen izquierdo: 100 PX

Margen derecho: -80px

Revestimiento superior: 120 PX
Finamiento inferior: 120 PX
Borde y luego agregue una ventaja a su elección.
Ancho fronterizo: 13 PX
Color del borde: # 7479ff
Estilo de borde: doble

Animación junto con una animación que incluye una demora en la animación mayor que las que se han otorgado a los dos módulos de texto anteriores.
Estilo de animación: pliegue
Repita la animación: una vez
Dirección de la animación: izquierda

Retraso de animación: 2000 ms
Animación de intensidad: 100%
IND ÍNDICE Asegúrese de que el módulo aparezca en contenido utilizando un índice negativo Z.
IND ÍNDICE: -1
Clone el módulo de texto y coloque al final de la columna 3 después de terminar de agregar y modificar el módulo de texto, clonar y colocar el duplicado al final de la tercera fila.
Cambie el borde Cambie el color del duplicado.

Color del borde: # b3d1ff
¡Cambie su animación, agregue retraso de animación adicional y haya terminado!

Animación de retraso: 3000 ms

Vista previa ahora, que hemos dado todos los pasos, para echar un vistazo final al resultado de los tres ejemplos que hemos recreado a lo largo de este tutorial. Ejemplo no. 1
Ejemplo no. 2

Ejemplo no. 3