[Résolu] Faire tourner le border dashed

Bonjour,
J'aimerais savoir s'il est possible de faire tourner le 'border dashed' mais pas la figure.
Je ne sais pas si c'est possible, ni en CSS ni en JS.

Si vous voulez tester votre code sur les figures : https://jsfiddle.net/exercices/jtgh7f9x/2/

Merci beaucoup !

Salut,

En CSS je ne pense pas.

En SVG+CSS oui en animant le stroke-dashoffset.

Sinon y'a des trics à base de background comme : https://matthewjamestaylor.com/animated-photoshop-selection-on-web-pages

Merci @_laurent !

a écrit :
En SVG+CSS oui en animant le stroke-dashoffset.

Ce que j'ai trouvé ne parle pas de ça. Et le SVG, je ne comprend rien.

a écrit :
Sinon y'a des trics à base de background comme : https://matthewjamestaylor.com/animated-photoshop-selection-on-web-pages

Ce sont juste des gifs en arrière-plan.

N'y aurait t'il pas de solutions plus conventionnelles ?

En SVG j'ai ça en stock : CodePen

@Oloivier C, Merci ! C'est bien ça mais est-ce que vous savez comment faire pour que cette animation s'intègre à https://jsfiddle.net/exercices/jtgh7f9x/2/ ?

jshtml a écrit :
Le SVG, je ne comprend rien.

Merci !

en css , on pourrait mélanger en fond des gradients, background-size et background-position

exemple : https://codepen.io/gc-nomade/pen/abZxjdv

inspirer de : https://codepen.io/gc-nomade/details/IGliC et https://codepen.io/gc-nomade/details/pKwby

cdt

gcyrillus a écrit :

background-size:
3px 200%,
3px 200%,
200% 3px,
200% 3px;

Merci pour ça gcyrillus c'est top comme trick !
Modifié par _laurent (18 Nov 2020 - 14:16)