Rotating dashed border

Re: maxart: I'd be really interested to know how people would replicate this (animated drop target) with web technologies / @deaxon ? @desandro ?

by Marie GĂ©rard

HTML

<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>

CSS

body {
  background: #B4BEC8;
  color: white;
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

.rotating-dashed {
  position: relative;
  margin: 40px auto;
  width: 90px;
  height: 90px;
  overflow: hidden;
  color: #268;
}

.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: white;
  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% ); }
}