Comment utiliser CSS et D3 pour obtenir l'effet d'un espace hexagonal sans fin-tutoriel CSS-php.cn

Comment utiliser CSS et D3 pour obtenir l'effet d'un espace hexagonal sans fin

不言

Libérer： 2018-07-28 11:17:10

original

2400 Les gens l'ont consulté

Cet article vous présente comment utiliser CSS et D3 pour obtenir l'effet d'un espace hexagonal sans fin. Il a une bonne valeur de référence et j'espère qu'il pourra aider les amis dans le besoin.

Aperçu de l'effet

Comment utiliser CSS et D3 pour obtenir leffet dun espace hexagonal sans fin

Interprétation du code

Définissez dom, le conteneur contient 1 contenant 5 <span></span> <p></p> :

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

Copier après la connexion

Affichage centré :

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

Copier après la connexion

Définir les dimensions du contenant extérieur circulaire :

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

Copier après la connexion

dans un contenant hexagonal Dessiner 1 rectangle :

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

Copier après la connexion

Créez 2 autres rectangles de même taille en utilisant des pseudo-éléments pour former un hexagone :

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

Copier après la connexion

Laissez alterner les couleurs des hexagones Présentation :

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

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

Copier après la connexion

Ensemble variables pour que les hexagones rétrécissent progressivement et que les petits hexagones se chevauchent au-dessus des grands hexagones :

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

Copier après la connexion

Réglez à nouveau les variables pour que les hexagones Les formes soient inclinées tour à tour à différents angles :

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

Copier après la connexion

Définissez l'effet d'animation :

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

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

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

Copier après la connexion

Masquez le contenu à l'extérieur du conteneur :

.container {
    overflow: hidden;
}

Copier après la connexion

Utilisez ensuite d3 pour créer un hexagone par lots.
Présentez la bibliothèque d3 :

<script></script>

Copier après la connexion

Utilisez d3 pour créer un élément dom hexagonal :

const COUNT = 5;

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

Copier après la connexion

Utilisez d3 pour les variables --n et --scale de l'hexagone Devoir :

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

Copier après la connexion

Supprimer l'élément dom hexagonal dans le fichier html et les variables déclarées dans le fichier css.

Enfin, changez le nombre d'hexagones à 100 :