CSS
.border {
position: relative;
margin: 60px auto;
width: 300px;
height: 100px;
overflow: hidden;
color:#090;
}
.border:hover {
cursor: pointer;
color:#f00;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.border .line {
width: 100%;
height: 100%;
display: block;
position: absolute;
}
.border .line:nth-of-type(1) {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
.border .line:nth-of-type(2) {
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
margin-left:100px;
}
.border .line:nth-of-type(3) {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
.border .line:nth-of-type(4) {
-webkit-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
margin-left:-100px;
}
.border .line i {
left: 0;
top: 0;
width: 200%;
display: block;
position: absolute;
border-bottom: 5px dashed;
-webkit-animation: rotate 6s infinite linear;
animation: rotate 6s infinite linear;
}
.border .text {
width:300px;
line-height: 80px;
display: block;
text-align: center;
position: absolute;
font-size: 40px;
}
@-webkit-keyframes rotate {
from {
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
to {
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
}
@keyframes rotate {
from {
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
to {
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
}
