Heim > Web-Frontend > CSS-Tutorial > So erstellen Sie mit CSS und D3 ein tanzendes Bild (Quellcode im Anhang)

So erstellen Sie mit CSS und D3 ein tanzendes Bild (Quellcode im Anhang)

不言
Freigeben: 2018-10-08 16:48:54
nach vorne
2140 Leute haben es durchsucht

Der Inhalt dieses Artikels befasst sich mit der Verwendung von CSS und D3 zum Realisieren eines Tanzbildes (Quellcode im Anhang). Ich hoffe, dass er für Freunde hilfreich ist dir geholfen.

Effektvorschau

So erstellen Sie mit CSS und D3 ein tanzendes Bild (Quellcode im Anhang)

Quellcode-Download

https://github.com/comehope/front- end-daily-challenges

Codeinterpretation

definiert dom, der Container enthält 1 .square Untercontainer, der Untercontainer enthält 4 <span></span>, jedes <span></span> stellt eine Diagonale dar Sektor:

<figure>
    <div>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</figure>
Nach dem Login kopieren

Zentrierte Anzeige:

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #222;
}
Nach dem Login kopieren

Legen Sie die Größeneinheit des Containers fest, 1em entspricht 8px:

.container {
    font-size: 8px;
}
Nach dem Login kopieren

4 der Untercontainer <span></span> Keine Breite und Höhe, nur Ränder, der 1. und 4. <span></span> übernehmen nur den linken und rechten Rand, der 2. und 3. <span></span> übernehmen nur den oberen und unteren Rand:

.square span {
    display: block;
    border: 2.5em solid transparent;
    color: #ddd;
}

.square span:nth-child(1),
.square span:nth-child(4) {
    border-left-color: currentColor;
    border-right-color: currentColor;
}

.square span:nth-child(2),
.square span:nth-child(3) {
    border-top-color: currentColor;
    border-bottom-color: currentColor;
}
Nach dem Login kopieren

übernehmen die Ränder Ändern zum Bogen:

.square span {
    border-radius: 50%;
}
Nach dem Login kopieren

Verwenden Sie das Rasterlayout im Untercontainer, um 4 <span></span> auf ein 2 * 2-Raster festzulegen:

.square {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 0.2em;
    padding: 0.1em;
}
Nach dem Login kopieren

Drehen Sie 4 <span></span> so, dass sie ein Quadrat bilden Das Ergebnis der Formel ist 45 Grad, um mit der Form der Formel für die folgende Animation übereinzustimmen:

.square span {
    transform: rotate(calc(45deg + 90deg * 0));
}
Nach dem Login kopieren

fügt eine Animation zum Drehen hinzu <span></span> . Der gesamte Animationsprozess dreht sich viermal um jeweils 90 Grad und kehrt nach vier Umdrehungen in die ursprüngliche Position zurück:

.square span {
    animation: rotation 2s ease-in-out infinite;
}

@keyframes rotation {
    0% { transform: rotate(calc(45deg + 90deg * 0)); }
    25% { transform: rotate(calc(45deg + 90deg * 1)); }
    50% { transform: rotate(calc(45deg + 90deg * 2)); }
    75% { transform: rotate(calc(45deg + 90deg * 3)); }
    100% { transform: rotate(calc(45deg + 90deg * 4)); }
}
Nach dem Login kopieren

Führen Sie zwei der <span></span> Bewegungen in die entgegengesetzte Richtung aus:

.square span:nth-child(2),
.square span:nth-child(3) {
    animation-direction: reverse;
}
Nach dem Login kopieren

Bisher wurde die Animation eines .square-Untercontainers abgeschlossen und als nächstes werden 4 Animationen von .square erstellt.
Fügen Sie 3 weitere Gruppen von .square Untercontainern im Dom hinzu:

<figure>
    <div>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
    <div>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
    <div>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
    <div>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</figure>
Nach dem Login kopieren

Verwenden Sie das Rasterlayout, um die 4 .square in eine Rasterform zu bringen. Die Variable --columns ist die Seitenlänge von Das Raster, das heißt, es gibt 2 .square Untercontainer auf jeder Seite:

.container {
    display: grid;
    --columns: 2;
    grid-template-columns: repeat(var(--columns), 1fr);
}
Nach dem Login kopieren

Jetzt sieht es so aus, als würden sich mehrere kleine schwarze Quadrate ständig bewegen. Wenn es mehr Dom-Elemente gibt, sieht der Animationseffekt stärker aus spektakulär, genau wie ein Gruppentanz, je mehr Leute da sind, desto kraftvoller wird er. Als nächstes verwenden Sie d3, um dom-Elemente stapelweise hinzuzufügen.
Stellen Sie die d3-Bibliothek vor:

<script></script>
Nach dem Login kopieren

Deklarieren Sie eine COLUMNS-Konstante, die die Seitenlänge des Rasters angibt:

const COLUMNS = 2;
Nach dem Login kopieren

Löschen Sie das Unterelement .square in der HTML-Datei und Verwenden Sie die dynamische D3-Erstellung:

d3.select('.container')
    .selectAll('p')
    .data(d3.range(COLUMNS * COLUMNS))
    .enter()
    .append('p')
    .attr('class', 'square');
Nach dem Login kopieren

Verwenden Sie weiterhin die Verkettungssyntax, um <span></span>-Unterelemente hinzuzufügen:

d3.select('.container')
    .selectAll('p')
    .data(d3.range(COLUMNS * COLUMNS))
    .enter()
    .append('p')
    .attr('class', 'square')
    .selectAll('span')
    .data(d3.range(4))
    .enter()
    .append('span');
Nach dem Login kopieren

Löschen Sie die Variablendeklaration --columns in der CSS-Datei und verwenden Sie stattdessen die dynamische D3-Deklaration :

d3.select('.container')
    .style('--columns', COLUMNS)
    /*略*/
Nach dem Login kopieren

Ändern Sie abschließend die Seitenlänge auf 4, das heißt, lassen Sie 16 .square zusammen animieren:

const COLUMNS = 4;
Nach dem Login kopieren

Fertig!

Das obige ist der detaillierte Inhalt vonSo erstellen Sie mit CSS und D3 ein tanzendes Bild (Quellcode im Anhang). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:segmentfault.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage