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

This article will explain in detail how to use CSS and D3 to achieve the animation effect of black and white overlap. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

Code interpretation

Define dom. The container contains 3 child elements, each of which represents a circle:

Centered display:

Body {

Margin:0

Height:100vh

Display:flex

Align-items:center

Justify-content:center

Background-color:black

}

Define the container size:

.circles {

Width:60vmin

Height:60vmin

}

Draw 1 circle in the container:

.circles {

Position:relative

}

.circlesspan {

Position:absolute

Box-sizing:border-box

Width:50%

Height:50%

Background-color:white

Border-radius:50%

Left:25%

}

Define variables and draw multiple circles, each of which rotates around the bottom midpoint of the first circle to form a larger circle:

.circles {

-- particles:3

}

.circlesspan {

Transform-origin:bottomcenter

Deg:calc (360deg/var (--particles) * (var (--n)-1))

Transform:rotate (var (--deg))

}

.circlesspan:nth-child (1) {

-- nRO 1

}

.circlesspan:nth-child (2) {

-- nRO 2

}

.circlesspan:nth-child (3) {

-- nRO 3

}

Add animation to the child elements:

.circlesspan {

Animation:rotating5sease-in-outinfinite

}

@ keyframesrotating {

0% {

Transform:rotate (0)

}

50% {

Transform:rotate (var (--deg)) translateY (0)

}

100% {

Transform:rotate (var (- deg)) translateY (100%) scale (2)

}

}

Set the child element blending mode so that the parts that overlap between the child elements appear black:

.circlesspan {

Mix-blend-mode:difference

}

Add animation effects to the container and offset sub-elements to make the animation link up smoothly:

.circles {

Animation:zoom5slinearinfinite

}

@ keyframeszoom {

To {

Transform:scale (0.5) translateY (- 50%)

}

}

Next, use d3 to batch process dom elements and css variables.

Introduce the d3 library:

Use d3 to assign values to variables that represent the number of circles:

ConstCOUNT_OF_PARTICLES=30

D3.select ('.circles')

.style ('--particles',COUNT_OF_PARTICLES)

Generate dom elements with d3:

D3.select ('.circles')

.style ('--particles',COUNT_OF_PARTICLES)

.selectAll ('span')

.data (d3.range (COUNT_OF_PARTICLES))

.enter ()

.append ('span')

Assign a value to the variable that represents the subscript of the child element with d3:

D3.select ('.circles')

.style ('--particles',COUNT_OF_PARTICLES)

.selectAll ('span')

.data (d3.range (COUNT_OF_PARTICLES))

.enter ()

.append ('span')

.style ('--nasty, (d) = > dumb1)

Delete the relevant dom elements in the html file and the related css variables in the css file.

Finally, adjust the number of circles to 30:

ConstCOUNT_OF_PARTICLES=30

The great task has been completed!

On "how to use CSS and D3 to achieve black-and-white animation effect" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, please share it out for more people to see.

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.