How do I make a moving dotted border using CSS?
I am showing a dotted box around the input text element with
border: 1px dashed black
:;
Is there some way to define an "offset" to tell the browser where to start from the border?
My goal is to define a timer and change the offset of the dashed border (using java GWT element.setAttribute ()) to simulate the clockwise dotted border.
Is there an existing offset for borders with css?
source to share
There is a somewhat tricky workaround to achieve a similar effect by using an animated .gif as the background of the div, with whatever content you wanted to "border" in a second div nested within the first with a 1px mark.
The animated .gif should be a small square (8px x 8px) with 3px wide diagonal lines moving across it from left to right (you can adjust the dimensions to adjust the width of the lines). When only the width or height of this image is visible, it appears as a moving dotted line.
This method is detailed here: http://matthewjamestaylor.com/blog/animated-photoshop-selection-on-a-web-page .
source to share