So erzielen Sie mit CSS und D3 den Effekt eines endlosen sechseckigen Raums-CSS-Tutorial-php.cn

So erzielen Sie mit CSS und D3 den Effekt eines endlosen sechseckigen Raums

不言

Freigeben： 2018-07-28 11:17:10

Original

2399 Leute haben es durchsucht

Dieser Artikel führt Sie in die Verwendung von CSS und D3 ein, um den Effekt eines endlosen sechseckigen Raums zu erzielen. Er hat einen guten Referenzwert und ich hoffe, er kann Freunden in Not helfen.

Effektvorschau

So erzielen Sie mit CSS und D3 den Effekt eines endlosen sechseckigen Raums

Code-Interpretation

Dom definieren, der Container enthält 1 mit 5 <span></span> <p></p>:

<p>
    </p><p>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </p>

Nach dem Login kopieren

Zentrierte Darstellung:

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at center, gold, black);
}

Nach dem Login kopieren

Größe des runden Außenbehälters festlegen:

.container {
    width: 20em;
    height: 20em;
    font-size: 20px;
    border-radius: 50%;
}

Nach dem Login kopieren

Rechteck in den sechseckigen Behälter zeichnen:

.hexagons {
    width: inherit;
    height: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hexagons span {
    position: absolute;
    width: calc(20em / 1.732);
    height: inherit;
    background-color: currentColor;
}

Nach dem Login kopieren

Erstelle 2 Weitere Rechtecke gleicher Größe unter Verwendung von Pseudoelementen, um ein Sechseck zu bilden:

.hexagons span:before,
.hexagons span:after {
    content: '';
    position: absolute;
    width: inherit;
    height: inherit;
    background-color: currentColor;
}

.hexagons span:before {
    transform: rotate(60deg);
}

.hexagons span:after {
    transform: rotate(-60deg);
}

Nach dem Login kopieren

Lassen Sie die Farben der Sechsecke versetzt erscheinen:

.hexagons span:nth-child(odd) {
    color: gold;
}

.hexagons span:nth-child(even) {
    color: #222;
}

Nach dem Login kopieren

Einstellungen Variable, lassen Sie das Sechseck allmählich schrumpfen und das kleine Sechseck überlappt das große Sechseck:

.hexagons span {
    transform: scale(var(--scale)) ;
}

.hexagons span:nth-child(1) {
    --scale: 1;
}

.hexagons span:nth-child(2) {
    --scale: calc(1 * 0.9);
}

.hexagons span:nth-child(3) {
    --scale: calc(1 * 0.9 * 0.9);
}

.hexagons span:nth-child(4) {
    --scale: calc(1 * 0.9 * 0.9 * 0.9);
}

.hexagons span:nth-child(5) {
    --scale: calc(1 * 0.9 * 0.9 * 0.9 * 0.9);
}

Nach dem Login kopieren

Dann legen Sie die Variable fest, um das Sechseck in verschiedenen Winkeln neigen zu lassen:

.hexagons span {
    transform: scale(var(--scale)) rotate(calc(var(--n) * 6deg));
}

.hexagons span:nth-child(1) {
    --n: 1;
}

.hexagons span:nth-child(2) {
    --n: 2;
}

.hexagons span:nth-child(3) {
    --n: 3;
}

.hexagons span:nth-child(4) {
    --n: 4;
}

.hexagons span:nth-child(5) {
    --n: 5;
}

Nach dem Login kopieren

Definieren Sie den Animationseffekt:

.hexagons {
    animation: twist 0.5s linear infinite;
}

@keyframes twist {
    from {
        transform: rotate(0deg) scale(1);
    }

    to {
        transform: rotate(calc(6deg * -2)) scale(1.25);
    }
}

Nach dem Login kopieren

Verstecken Sie den Inhalt außerhalb des Containers :

.container {
    overflow: hidden;
}

Nach dem Login kopieren

Als nächstes verwenden Sie d3, um Sechsecke in Stapeln zu erstellen.
Stellen Sie die d3-Bibliothek vor:

<script></script>

Nach dem Login kopieren

Verwenden Sie d3, um ein sechseckiges Domelement zu erstellen:

const COUNT = 5;

d3.select('.hexagons')
    .selectAll('span')
    .data(d3.range(COUNT))
    .enter()
    .append('span');

Nach dem Login kopieren

Verwenden Sie d3, um den Variablen --n und --scale Werte zuzuweisen hexagon:

d3.select('.hexagons')
    .selectAll('span')
    .data(d3.range(COUNT))
    .enter()
    .append('span')
    .style('--scale', (d) => Math.pow(0.9, d))
    .style('--n', (d) => d + 1);

Nach dem Login kopieren

Löschen Sie das hexagonale dom-Element in der HTML-Datei und die in der CSS-Datei deklarierten Variablen.

Ändern Sie abschließend die Anzahl der Sechsecke auf 100:

const COUNT = 100;

Nach dem Login kopieren

Fertig!

Verwandte Empfehlungen:

Wie man mit CSS einen Vogel zeichnet (Code)

Wie man mit reinem CSS einen dynamischen Zug implementiert

Das obige ist der detaillierte Inhalt vonSo erzielen Sie mit CSS und D3 den Effekt eines endlosen sechseckigen Raums. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!