Heim >Web-Frontend >CSS-Tutorial >So verwenden Sie CSS und D3, um überlappende Schwarz-Weiß-Animationseffekte zu erzielen

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

不言
不言Original
2018-08-17 14:03:262378Durchsuche

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

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

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!

Stellungnahme:
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