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 abernier

HTML

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

<p>Re:  <a href="https://twitter.com/maxart/status/25253247161733120">maxart</a>: I'd be really interested to know how people would replicate this <a href="http://f.cl.ly/items/0A282x0M3C3i1N2f3m2M/dragndrop.mov">(animated drop target)</a> with web technologies  / @deaxon ? @desandro ?</p>

<p>See <a href="http://playground.deaxon.com/css/rotating-dashed-border/">Benjamin De Cock&rsquo;s solution</a>.</p>

<h2>Pros</h2>

<ul>
  <li>No images</li>
  <li>Only one animation declation</li>
</ul>

<h2>Cons</h2>

<ul>
  <li>No rounded corners</li>
  <li>WebKit only</li>
  <li>Border dashes are in sync only when the dimensions of the target are a multiple of 30. Probably won't be in sync for other browsers who render dashed borders differently.</li>
  <li>Requires additional tag inside border element</li>
</ul>

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



/* default styles */



p, h1, h2, ul { margin-bottom: 0.8em; }

h1 { font-size: 1.5em; font-weight: 300; }
h2 { font-size: 1.25em; font-weight: 300; }

ul { margin-left: 1.5em; list-style: disc; }


a, a:visited { 
  color: #268; 
  text-decoration: none;
}

a:hover { color: #B20; border-bottom: 1px dashed;  }