Comment utiliser CSS et D3 pour obtenir des effets d'animation superposés en noir et blanc

Le contenu de cet article explique comment utiliser CSS et D3 pour obtenir l'effet d'animation superposé en noir et blanc. L'article présente la compréhension de cela en js, qui a une certaine valeur de référence. référez-vous-y, j'espère que cela vous sera utile.

Aperçu de l'effet

Interprétation du code

Définissez dom, le conteneur contient 3 sous-éléments, chaque sous-élément représente un cercle :

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

Affichage centré :

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

Définir la taille du conteneur :

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

Dessiner un cercle dans le conteneur :

.circles {
    position: relative;
}

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

Définir les variables, Dessinez plusieurs cercles, chacun tournant autour du milieu inférieur du premier cercle pour former un cercle plus grand :

.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;
}

Ajoutez des effets d'animation aux éléments enfants :

.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);
    }
}

Définissez le mode de mélange des couleurs de sous-éléments afin que les parties superposées entre les sous-éléments soient affichées en noir :

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

Ajoutez des effets d'animation au conteneur pour compenser l'agrandissement des sous-éléments et rendre l'animation fluide :

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

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

Ensuite, utilisez d3 pour traiter par lots les éléments dom et les variables CSS.
Présentez la bibliothèque d3 :

<script></script>

Utilisez d3 pour attribuer une valeur à la variable représentant le nombre de cercles :

const COUNT_OF_PARTICLES = 30;

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

Utilisez d3 pour générer des éléments dom :

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

Utilisez d3 pour attribuer une valeur à la variable représentant l'indice du sous-élément :

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

Supprimez les éléments dom pertinents dans le fichier html et les variables css pertinentes dans le fichier css.

Enfin, ajustez le nombre de cercles à 30 :

const COUNT_OF_PARTICLES = 30;

Vous avez terminé !

Recommandations associées :

Comment utiliser du CSS pur pour implémenter un effet d'animation sans éléments DOM

Comment utiliser du CSS pur pour implémenter un chien en mouvement L'effet d'animation du petit lapin blanc

Comment utiliser CSS pour obtenir l'effet de chargeur de camion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!