Marching Ant Border mit einem GIF

Question

Ich weiß, es gibt eine Möglichkeit, marschieren Ameisen mit linearen Gradienten, aber es isst eine riesige Menge an CPU (etwa 10% für jeden). Ich versuche, eine Alt-Lösung zu machen, aber border-image-slice verwirrend finden.

Hier sind die veraltet Tutorial Ich verwende: http://www.chrisdanford.com/blog/2014/04/28/marching-ants-animated-selection-rectangle-in-css/

Ich habe die veraltete CSS entfernt, aber ich bin nicht sicher, wie das Bild zu schneiden, so dass die Ameisen marschieren werden. Das tut sagt:

Wir beginnen würden mit einem 10px x 10px animiertes Gif, die aus neun Kacheln zusammengesetzt ist: 1 × 1 in den Ecken, 1 × 8 oder 8 × 1 an den Rand und 8 × 8 in der Mitte.

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>

Dank

Answer 1

Der Hintergrund wiederholen sollte, strecken nicht. Ist das was du willst?

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

Gibt es einen Grund, warum Sie eine Leinwand nicht verwenden?

Das Canvas-Element hat eine lineDashOffset Eigenschaft, die oft für marschierende Ameisen Effekte verwendet:
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset

Wenn Sie sich mit einem GIF planen sieht es aus, als ob Skalierung nicht etwas ist, Sie sind besorgt Vielleicht ist eine Leinwand also ein besserer Weg. Puffer-Canvases können auch verwendet werden, um die Leistung zu verbessern.

Answer 3

Hier ist CSS-Version, die ich gefunden habe, wie es mit den anderen vergleicht, wenn es um CPU-Auslastung geht?

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/