Marcher une fourmilière en utilisant un GIF

Question

Je sais qu'il y a un moyen de faire marcher des fourmis avec des gradients linéaires mais ça consomme énormément de CPU (environ 10% pour chacun). J'essaye de faire une solution d'alt mais trouve border-image-slice confondant.

Voici le tutoriel pas à jour j'utilise: http://www.chrisdanford.com/blog/2014/04/28/marching-ants-animated-selection-rectangle-in-css/

J'ai enlevé le css obsolète, mais je ne suis pas sûr de savoir comment tranche l'image de sorte que les fourmis marchent. Le Tut dit:

Nous allons commencer par un 10px x 10px GIF animé qui se compose de neuf tuiles: 1 × 1 dans les coins, 1 × 8 ou 8 × 1 sur les bords, et 8 × 8 dans le centre .

body { 
 
    background-color: green; 
 
} 
 

 
.box { 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: black; 
 
} 
 

 
.marching { 
 
    border: 1px solid transparent; 
 
    border-image-source: url('https://i.imgsafe.org/e5bc19b03a.gif'); 
 
    border-image-slice: 1; 
 
    border-image-repeat: stretch stretch; 
 
}

<div class="box marching"></div>

Merci

Answer 1

L'arrière-plan doit se répéter, ne pas étirer. Est-ce ce que vous allez faire?

body { 
 
    background-color: green; 
 
} 
 

 
.box { 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: black; 
 
} 
 

 
.marching { 
 
    border: 1px solid transparent; 
 
    border-image-source: url('https://i.imgsafe.org/e5bc19b03a.gif'); 
 
    border-image-slice: 1; 
 
    border-image-repeat: repeat repeat; 
 
}

<div class="box marching"></div>

Answer 2

Y at-il des raisons pour lesquelles vous ne l'utilisez une toile?

L'élément Canvas possède une propriété lineDashOffset qui est souvent utilisé pour les effets de fourmis marche:
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset

Si vous prévoyez d'utiliser un GIF il semble que l'échelle n'est pas quelque chose que vous êtes inquiet au sujet , alors peut-être qu'une toile pourrait être une meilleure façon de le faire. Les tampons-canevas peuvent également être utilisés pour améliorer les performances.

Answer 3

Voici la version de CSS que j'ai trouvée, comment la compare-t-elle aux autres en ce qui concerne l'utilisation du processeur?

body { background: green; } 
 
.box { 
 
    position: relative; 
 
    width: 90px; 
 
    height: 90px; 
 
    overflow: hidden; 
 
    margin: 10px; 
 
    background: black; 
 
} 
 
.box * { 
 
    position: absolute; 
 
} 
 
.box div { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.box div:nth-child(1) { transform: rotate( 0deg); } 
 
.box div:nth-child(2) { transform: rotate( 90deg); } 
 
.box div:nth-child(3) { transform: rotate(180deg); } 
 
.box div:nth-child(4) { transform: rotate(270deg); } 
 
.box i { 
 
    left: 0; 
 
    top: 0; 
 
    width: 200%; 
 
    border-bottom: 1px dashed white; 
 
} 
 
.box i { 
 
    animation: marching 4s infinite linear; 
 
} 
 
@keyframes marching { 
 
    from { transform: translateX(-50%); } 
 
    to { transform: translateX( 0%); } 
 
}

<div class="box"> 
 
    <div><i></i></div> 
 
    <div><i></i></div> 
 
    <div><i></i></div> 
 
    <div><i></i></div> 
 
</div>

Src: https://jsfiddle.net/desandro/zm7Et/