Bordes animados en Pure CSS-Animated-Border. CSS

Vista prévia

Descripción

Animated-Border. CSS es una librería CSS pura que aplica animaciones de fantasía a los bordes de tus elementos usando CSS/CSS3 puro.

Funcionamiento

Instálelo con NPM:

# NPM
$ npm install pure-css3-animated-border --save

Incluya el archivo CSS Animated-Border. min. CSS en la página HTML.

<link href="animated-border.css" rel="stylesheet">

Agrega un CSS de animación de tu elección a tu elemento y listo. Todas las clases CSS posibles:

• . UI-Box. topBottom-leftRightCorner
• . UI-Box. topBottom-rightLeftCorner
• . UI-Box. forwardBorderTrain
• . UI-Box. backwardBorderTrain
• . UI-Box. Border-inOutSpread
• . UI-Box. Slideopuesto
• . UI-Box. Top-leftToRight
• . UI-Box. derecha-topToBottom
• . UI-Box. Bottom-rightToLeft
• . UI-Box. bottomToTop izquierdo
• . UI-Box. Top-rightToLeft
• . UI-Box. bottomToTop derecho
• . UI-Box. Bottom-leftToRight
• . UI-Box. Left-topToBottom
• . UI-Box. Top-inOutSpread
• . UI-Box. inOutSpread de la derecha
• . UI-Box. Bottom-inOutSpread
• . UI-Box. izquierda-inOutSpread
• . UI-Box. Top-Slideopuesto
• . UI-Box. Right-Slideopuesto
• . UI-Box. Bottom-Slideopuesto
• . UI-Box. Left-Slideopuesto
• . UI-Box. Top-leftStart
• . UI-Box. Top-rightStart
• . UI-Box. Bottom-rightStart
• . UI-Box. Bottom-leftStart
• . UI-Box. Top-leftStart-backward
• . UI-Box. Top-rightStart-backward
• . UI-Box. Bottom-rightStart-backward
• . UI-Box. Bottom-leftStart-backward
• . UI-Box. Top-leftStart-burst
• . UI-Box. Top-rightStart-burst
• . UI-Box. Bottom-rightStart-burst
• . UI-Box. Bottom-leftStart-burst
• . UI-Box. Top-leftStart-burst-backward
• . UI-Box. Top-rightStart-burst-backward
• . UI-Box. Bottom-rightStart-burst-backward
• . UI-Box. Bottom-leftStart-burst-backward
• . UI-Box. Top-Stay
• . UI-Box. derecho de estancia
• . UI-Box. Bottom-Stay
• . UI-Box. Left-Stay

<a href="#"


class="ui-box bottom-leftToRight">

 Online Demo
</a>