We would like to know how to create Rotating dashed border.
Code revised from
http://fiddle.jshell.net/desandro/zm7Et/
See <a href="http://playground.deaxon.com/css/rotating-dashed-border/">Benjamin
De Cock’s solution</a>.
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.rotating-dashed {<!-- www . ja va 2 s.c o m-->
position: relative;
margin: 40px auto;
width: 90px;
height: 90px;
overflow: hidden;
}
.rotating-dashed .dashing {
display: block;
width: 100%;
height: 100%;
position: absolute;
}
.rotating-dashed .dashing:nth-of-type(1) {
-webkit-transform: rotate(0deg);
}
.rotating-dashed .dashing:nth-of-type(2) {
-webkit-transform: rotate(90deg);
}
.rotating-dashed .dashing:nth-of-type(3) {
-webkit-transform: rotate(180deg);
}
.rotating-dashed .dashing:nth-of-type(4) {
-webkit-transform: rotate(270deg);
}
.rotating-dashed .dashing i {
display: block;
position: absolute;
left: 0;
top: 0;
width: 200%;
border-bottom: 5px dashed;
}
.rotating-dashed strong {
display: block;
width: 105%;
line-height: 90px;
text-align: center;
position: absolute;
font-size: 50px;
-webkit-transform: rotate(90deg);
}
.rotating-dashed:hover {
color: red;
cursor: pointer;
}
.rotating-dashed:hover .dashing i {
-webkit-animation: slideDash 2.5s infinite linear;
}
@-webkit-keyframes slideDash {
from { -webkit-transform:translateX(-50%);}
to {-webkit-transform: translateX(0%);}
}
</style>
</head>
<body>
<h1>Rotating dashed border</h1>
<p>Hover over target to trigger animation</p>
<div class="rotating-dashed">
<span class="dashing"><i></i></span> <span class="dashing"><i></i></span>
<span class="dashing"><i></i></span> <span class="dashing"><i></i></span>
<strong>➜</strong>
</div>
</body>
</html>
The code above is rendered as follows: