Bordes animados en Pure CSS-Animated-Border. CSS
| Autor: | code-fx |
|---|---|
| Views Total: | 2,399 |
| Sitio oficial: | Ir a la web |
| Actualizado: | October 30, 2017 |
| Licencia: | MIT |
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>





