Cómo animar el borde punteado con CSS

Los bordes decorados pueden adornar cualquier elemento de la página, pero los bordes de CSS están limitados cuando se trata de estilo. Con frecuencia, los desarrolladores encuentran soluciones como bordes de gradiente CSS, bordes SVG, múltiples bordes y más para imitar y actualizar el aspecto de los bordes de cuadro y sus animaciones..

Hoy analizaremos un truco más simple para bordes discontinuos: animación de bordes discontinuos. El borde de guiones animado se creará usando solo contorno y sombra de la caja, Sin dejar ningún escándalo por las caídas, ya que contorno es compatible desde IE8 en adelante. De esa manera, el usuario aún podrá ver los bordes a diferencia de cuando se usa SVG o gradiente. Con esto también puedes crear guiones bicolores. Vamos a ver.

Creando Las Fronteras

Primero crearemos las fronteras. Para esto, usaremos un contorno discontinuo y una sombra de cuadro..

 .banners esquema: 6px discontinuo amarillo; box-shadow: 0 0 0 6px # EA3556;… 

los contorno necesitará todos sus valores; Ancho, tipo y color. los sombra de la caja solo necesita el valor para untado que debe ser el mismo que el ancho del contorno y su color. Tanto el contorno como la sombra de la caja juntos crearán el efecto de guiones de dos colores.

Luego puede ajustar el ancho o la altura de la caja para la apariencia de borde deseada en las esquinas.

Animando las fronteras

Para nuestro primer ejemplo de animación, agregaremos animaciones de fotogramas clave CSS a un conjunto de pancartas con los bordes que se animan continuamente, ganando atención. Para el efecto de animación, simplemente intercambiaremos los colores del contorno y la sombra del cuadro..

@keyframes animateBorder to outline-color: # EA3556; caja-sombra: 0 0 0 6px amarillo; 

Puede orientar el color del contorno utilizando color de contorno propiedad de mano alzada, sin embargo, para la sombra del cuadro, tendrá que dar todos los valores a la propiedad de taquigrafía por ahora.

Una vez que la animación esté lista, agrégala al cuadro..

.banners esquema: 6px discontinuo amarillo; box-shadow: 0 0 0 6px # EA3556; animación: 1s animateBorder infinite;…

Transiciones en las fronteras

Para el ejemplo de transición, agregaremos bordes a las imágenes y los animaremos al pasar el cursor. También puedes cambiar el tamaño del borde para diferentes efectos..

.photos outline: 20px dashed # 006DB5; box-shadow: 0px 0px 0px 20px # 3CFDD3; transición: todos los 1s;… .photos: hover outline-color: # 3CFDD3; cuadro de sombra: 0 0 0 20 px # 006DB5; 

Ahora, pase el cursor sobre estas imágenes para ver los bordes discontinuos de CSS en todo su esplendor animado.

Y eso es una envoltura. Puede intentar reemplazar los bordes discontinuos con puntos de puntos, pero el efecto podría no ser tan bueno. También puedes cambiar el tipo de contorno durante la animación para algunos efectos más.