Bordes giratorios estilo neón con CSS puro/CSS3

Vista prévia

Descripción

En este artículo vamos a crear bordes giratorios de estilo neón para un elemento HTML usando transformaciones y transiciones CSS3.

Funcionamiento

Cree cuatro elementos DIV vacíos para los bordes.

<div class="rotate">

<div class="line"><i></i></div>

<div class="line"><i></i></div>

<div class="line"><i></i></div>

<div class="line"><i></i></div>
</div>

El núcleo CSS/CSS3 para los bordes rotatorios.

.rotate .line {

width: 100%;

height: 100%;

display: block;

position: absolute;
}

.rotate .line:nth-of-type(1) {

-webkit-transform: rotate(0deg);

-ms-transform: rotate(0deg);

transform: rotate(0deg);
}

.rotate .line:nth-of-type(2) {

-webkit-transform: rotate(90deg);

-ms-transform: rotate(90deg);

transform: rotate(90deg);

margin-left: 60px;
}

.rotate .line:nth-of-type(3) {

-webkit-transform: rotate(180deg);

-ms-transform: rotate(180deg);

transform: rotate(180deg);
}

.rotate .line:nth-of-type(4) {

-webkit-transform: rotate(270deg);

-ms-transform: rotate(270deg);

transform: rotate(270deg);

margin-left: -60px;
}

.rotate .line i {

left: 0;

top: 0;

width: 200%;

display: block;

position: absolute;

border-bottom: 5px dashed;

-webkit-animation: move 3.5s infinite linear;

animation: move 3.5s infinite linear;
}

.rotate .text {

width: 210px;

line-height: 80px;

display: block;

text-align: center;

position: absolute;

font-size: 40px;
}

@-webkit-keyframes
 move {
from {
 -webkit-transform: translateX(0%);
 transform: translateX(0%);
}

to {

-webkit-transform: translateX(-50%);

transform: translateX(-50%);
}
}

@keyframes
 move {
from {
 -webkit-transform: translateX(0%);
 transform: translateX(0%);
}

to {

-webkit-transform: translateX(-50%);

transform: translateX(-50%);
}
}