How to use CSS and D3 to achieve a dancing picture (source code attached)

不言
Release: 2018-10-08 16:48:54
forward
2129 people have browsed it

The content of this article is about how to use CSS and D3 to realize a dancing picture (source code attached). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. helped.

Effect preview

How to use CSS and D3 to achieve a dancing picture (source code attached)

Source code download

https://github.com/comehope/front- end-daily-challenges

Code Interpretation

Define dom, the container contains 1 .square sub-container, and the sub-container contains 4 <span>, each <code><span></span> represents a diagonal sector:

<figure>
    <div>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</figure>
Copy after login

Centered display:

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #222;
}
Copy after login

Set the size unit of the container, 1em is equal to 8px:

.container {
    font-size: 8px;
}
Copy after login

The 4 <span></span> in the sub-container have no width and height, only borders, among which the first and 4 <span></span> only take the left and right borders, the 2nd and 3rd <span></span> take only the top and bottom borders:

.square span {
    display: block;
    border: 2.5em solid transparent;
    color: #ddd;
}

.square span:nth-child(1),
.square span:nth-child(4) {
    border-left-color: currentColor;
    border-right-color: currentColor;
}

.square span:nth-child(2),
.square span:nth-child(3) {
    border-top-color: currentColor;
    border-bottom-color: currentColor;
}
Copy after login

Change the border to Arc:

.square span {
    border-radius: 50%;
}
Copy after login

Use grid layout in the sub-container to set 4 <span></span> to a 2 * 2 grid:

.square {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 0.2em;
    padding: 0.1em;
}
Copy after login

Rotate 4 <span></span>, so that they form a square and look like a flower. The result of the formula is 45 degrees. It is written like this to be consistent with the formula of the following animation:

.square span {
    transform: rotate(calc(45deg + 90deg * 0));
}
Copy after login

Add an animation that makes <span></span> rotate. The entire animation process rotates 4 times, each rotation is 90 degrees. After 4 rotations, it returns to the original position:

.square span {
    animation: rotation 2s ease-in-out infinite;
}

@keyframes rotation {
    0% { transform: rotate(calc(45deg + 90deg * 0)); }
    25% { transform: rotate(calc(45deg + 90deg * 1)); }
    50% { transform: rotate(calc(45deg + 90deg * 2)); }
    75% { transform: rotate(calc(45deg + 90deg * 3)); }
    100% { transform: rotate(calc(45deg + 90deg * 4)); }
}
Copy after login

Make it 2 <span></span> move in opposite directions:

.square span:nth-child(2),
.square span:nth-child(3) {
    animation-direction: reverse;
}
Copy after login

At this point, the animation of a .square sub-container has been completed, next, create 4 ## Animation of #.square. Add 3 more groups of
.square subcontainers in the dom:

<figure>
    <div>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
    <div>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
    <div>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
    <div>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</figure>
Copy after login
Use grid layout to lay out 4

.square into a grid, variable--columns is the side length of the grid, that is, there are 2 .square subcontainers on each side:

.container {
    display: grid;
    --columns: 2;
    grid-template-columns: repeat(var(--columns), 1fr);
}
Copy after login
Now it looks like there are several small black The blocks are constantly moving. When there are more DOM elements, the animation effect looks more spectacular, just like a group dance. The more people there are, the more powerful it becomes. Next, use d3 to add dom elements in batches.

Introduce the d3 library:

<script></script>
Copy after login
Declare a

COLUMNS constant, indicating the side length of the grid:

const COLUMNS = 2;
Copy after login
Delete

.square in the html file Sub-element, use d3 to dynamically create it instead:

d3.select('.container')
    .selectAll('p')
    .data(d3.range(COLUMNS * COLUMNS))
    .enter()
    .append('p')
    .attr('class', 'square');
Copy after login
Continue to use concatenation syntax to add

Sub-element:

d3.select('.container')
    .selectAll('p')
    .data(d3.range(COLUMNS * COLUMNS))
    .enter()
    .append('p')
    .attr('class', 'square')
    .selectAll('span')
    .data(d3.range(4))
    .enter()
    .append('span');
Copy after login

Delete it from the css file For the

--columns variable declaration, use d3 dynamic declaration instead:

d3.select('.container')
    .style('--columns', COLUMNS)
    /*略*/
Copy after login
Finally, change the side length to 4, that is, let 16

.square animate together :

const COLUMNS = 4;
Copy after login
Done!

The above is the detailed content of How to use CSS and D3 to achieve a dancing picture (source code attached). For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:segmentfault.com
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template