How to use CSS and D3 to achieve the effect of endless hexagonal space-CSS Tutorial-php.cn

How to use CSS and D3 to achieve the effect of endless hexagonal space

不言

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

Original

2400 people have browsed it

This article introduces you to how to use CSS and D3 to achieve the effect of endless hexagonal space. It has a good reference value and I hope it can help friends in need.

Effect Preview

How to use CSS and D3 to achieve the effect of endless hexagonal space

##Code Interpretation

Define dom, the container contains 1 and contains 5

< ;span>'s

:

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

Copy after login

Centered display:

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

Copy after login

Define the dimensions of the circular outer container:

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

Copy after login

Draw a rectangle in the hexagon container:

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

Copy after login

Use pseudo-elements to create 2 more rectangles of the same size, together forming a hexagon:

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

Copy after login

Let the hexagons The colors of the shapes are staggered:

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

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

Copy after login

Set the variables so that the hexagons gradually shrink, and the small hexagons overlap the large hexagons:

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

Copy after login

Set the variables again to make the hexagons smaller The shapes are tilted at different angles in turn:

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

Copy after login

Define the animation effect:

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

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

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

Copy after login

Hide the content outside the container:

.container {
    overflow: hidden;
}

Copy after login

Next, use d3 to create hexagons in batches.

Introducing the d3 library:

<script></script>

Copy after login

Use d3 to create a hexagonal dom element:

const COUNT = 5;

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

Copy after login

Use d3 to assign values to the hexagonal --n and --scale variables:

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

Copy after login

Delete the hexagonal dom element in the html file and the variables declared in the css file.

Finally, change the number of hexagons to 100:

const COUNT = 100;

Copy after login

You’re done!

Related recommendations:

How to use css to draw a bird (code)

How to use pure CSS to realize a dynamic train

The above is the detailed content of How to use CSS and D3 to achieve the effect of endless hexagonal space. For more information, please follow other related articles on the PHP Chinese website!