Shulou(Shulou.com)06/01 Report--

Editor to share with you how to use CSS and D3 to achieve a dance screen, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's learn about it!

Code interpretation

Define dom. The container contains 1 .square sub-container and 4 sub-containers, each representing a diagonal sector:

Centered display:

Body {

Margin:0

Height:100vh

Display:flex

Align-items:center

Justify-content:center

Background-color:#222

}

Sets the size unit of the container, 1em equals 8px:

.container {

Font-size:8px

}

Four of the sub-containers have no width or height, but only borders, of which the first and fourth take only the left and right borders, and the second and third only take the upper and lower borders:

.squarespan {

Display:block

Border:2.5emsolidtransparent

Color:#ddd

}

.squarespan:nth-child (1)

.squarespan:nth-child (4) {

Border-left-color:currentColor

Border-right-color:currentColor

}

.squarespan:nth-child (2)

.squarespan:nth-child (3) {

Border-top-color:currentColor

Border-bottom-color:currentColor

}

Change the border to an arc:

.squarespan {

Border-radius:50%

}

Use the grid layout in the child container to set 4 grids to 2: 2:

.square {

Display:grid

Grid-template-columns:repeat (2Jing 1fr)

Grid-gap:0.2em

Padding:0.1em

}

Rotate four so that they form a square that looks like a flower. The result of the formula is 45 degrees, written so that it is consistent with the form of the following animation:

.squarespan {

Transform:rotate (calc (45deg+90deg*0))

}

Increase the animation that allows rotation, the whole animation process rotates 4 times, 90 degrees each time, and then returns to its original position after 4 rotations:

.squarespan {

Animation:rotation2sease-in-outinfinite

}

@ keyframesrotation {

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

}

Make two of them move in the opposite direction:

.squarespan:nth-child (2)

.squarespan:nth-child (3) {

Animation-direction:reverse

}

At this point, one .square sub-container has been animated, and then four .square animations have been made.

Add three more sets of .square sub-containers to dom:

Use the grid layout to lay out the four .square as a grid, and the variable-- columns is the side length of the grid, that is, there are two .square sub-containers on each side:

.container {

Display:grid

-- columns:2

Grid-template-columns:repeat (var (- columns), 1fr)

}

Now it looks like there are a few small black squares moving all the time, and the more dom elements there are, the more spectacular the animation looks, just like a group dance, the more people, the more powerful. Next, use d3 to batch increase the elements of dom.

Introduce the d3 library:

Declare a COLUMNS constant that represents the edge length of the grid:

ConstCOLUMNS=2

Delete the .square child element in the html file and create it dynamically with d3:

D3.select ('.container')

.selectAll ('p')

.data (d3.range (COLUMNS*COLUMNS))

.enter ()

.append ('p')

.attr ('class','square')

Continue to add child elements with the suffix syntax:

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

Delete the-- columns variable declaration in the css file and use d3 dynamic declaration instead:

D3.select ('.container')

.style ('--columns',COLUMNS)

/ * slightly * /

Finally, change the side length to 4, that is, animate 16 .square together:

ConstCOLUMNS=4

The above is all the contents of the article "how to use CSS and D3 to achieve a dancing picture". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.