So verwenden Sie CSS und D3, um überlappende Schwarz-Weiß-Animationseffekte zu erzielen

Der Inhalt dieses Artikels befasst sich mit der Verwendung von CSS und D3, um überlappende Schwarz-Weiß-Animationseffekte zu erzielen. Der Artikel stellt das Verständnis hierfür in js vor, das einen gewissen Referenzwert hat Ich hoffe, dass es Ihnen hilfreich sein wird.

Effektvorschau

Code-Interpretation

Dom definieren, der Container enthält 3 Unterelemente, jedes Unterelement stellt einen Kreis dar:

<div>
    <span></span>
    <span></span>
    <span></span>
</div>

Zentrierte Anzeige:

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: black;
}

Behältergröße definieren:

.circles {
    width: 60vmin;
    height: 60vmin;
}

1 Kreis in den Behälter zeichnen:

.circles {
    position: relative;
}

.circles span {
    position: absolute;
    box-sizing: border-box;
    width: 50%;
    height: 50%;
    background-color: white;
    border-radius: 50%;
    left: 25%;
}

Variablen definieren und mehrere Kreise zeichnen, jeder Kreis dreht sich um den unteren Mittelpunkt des ersten Kreises herum, um einen größeren Kreis zu bilden:

.circles {
    --particles: 3;
}

.circles span {
    transform-origin: bottom center;
    --deg: calc(360deg / var(--particles) * (var(--n) - 1));
    transform: rotate(var(--deg));
}

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

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

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

Animationseffekte zu untergeordneten Elementen hinzufügen:

.circles span {
    animation: rotating 5s ease-in-out infinite;
}

@keyframes rotating {
    0% {
        transform: rotate(0);
    }

    50% {
        transform: rotate(var(--deg)) translateY(0);
    }

    100% {
        transform: rotate(var(--deg)) translateY(100%) scale(2);
    }
}

Stellen Sie den Farbmischmodus des untergeordneten Elements so ein, dass die überlappenden Teile dazwischen liegen Unterelemente werden in Schwarz angezeigt:

.circles span {
    mix-blend-mode: difference;
}

Fügen Sie Animationseffekte zum Container hinzu, um die Vergrößerung von Unterelementen auszugleichen und die Animation reibungslos zu verbinden:

.circles {
    animation: zoom 5s linear infinite;
}

@keyframes zoom {
    to {
        transform: scale(0.5) translateY(-50%);
    }
}

Als nächstes verwenden Sie d3 zur Stapelverarbeitung Dom-Elemente und CSS-Variablen.
Stellen Sie die d3-Bibliothek vor:

<script></script>

Verwenden Sie d3, um Variablen Werte zuzuweisen, die die Anzahl der Kreise darstellen:

const COUNT_OF_PARTICLES = 30;

d3.select('.circles')
    .style('--particles', COUNT_OF_PARTICLES)

Verwenden Sie d3, um Dom-Elemente zu generieren:

d3.select('.circles')
    .style('--particles', COUNT_OF_PARTICLES)
    .selectAll('span')
    .data(d3.range(COUNT_OF_PARTICLES))
    .enter()
    .append('span');

Verwenden Sie d3, um Unterelemente darzustellen. Zuweisung von indizierten Variablen:

d3.select('.circles')
    .style('--particles', COUNT_OF_PARTICLES)
    .selectAll('span')
    .data(d3.range(COUNT_OF_PARTICLES))
    .enter()
    .append('span')
    .style('--n', (d) => d + 1);

Löschen Sie die relevanten Dom-Elemente in der HTML-Datei und die relevanten CSS-Variablen in der CSS-Datei.

Stellen Sie abschließend die Anzahl der Kreise auf 30 ein:

const COUNT_OF_PARTICLES = 30;

Fertig!

Verwandte Empfehlungen:

So verwenden Sie reines CSS, um einen Animationseffekt ohne DOM-Elemente zu implementieren

So verwenden Sie reines CSS zur Implementierung ein sich bewegender Hund Der Animationseffekt des kleinen weißen Kaninchens

So verwenden Sie CSS, um den Effekt eines LKW-Laders zu erzielen

Das obige ist der detaillierte Inhalt vonSo verwenden Sie CSS und D3, um überlappende Schwarz-Weiß-Animationseffekte zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!