How to use CSS and D3 to realize the animation effect of overlapping black and white
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.
