Rotating dashed border

Hover over target to trigger animation





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

See Benjamin De Cock’s solution.

Pros

  • No images
  • Only one animation declation

Cons

  • No rounded corners
  • WebKit only
  • 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.
  • Requires additional tag inside border element