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