Author: | imprakash |
---|---|
Views Total: | 7,760 views |
Official Page: | Go to website |
Last Update: | December 12, 2014 |
License: | MIT |
Preview:

Description:
In this article we’re going to create neon style rotating borders for an Html element using CSS3 transforms and transitions.
How to use it:
Create four empty DIV elements for the borders.
<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>
The core CSS/CSS3 for the rotating borders.
.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%); } }