Page Widget How to - Create Rotating dashed border








Question

We would like to know how to create Rotating dashed border.

Answer

Code revised from 
http://fiddle.jshell.net/desandro/zm7Et/


See <a href="http://playground.deaxon.com/css/rotating-dashed-border/">Benjamin
De Cock&rsquo;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>&#x279C;</strong>
  </div>


</body>
</html>

The code above is rendered as follows: