Method for realizing black and white overlapping animation effects using CSS and D3

How to use CSS and D3 to achieve black and white overlapping animation effects? This issue may be often seen in our daily study or work. I hope that you can give you a deep harvest through this issue. Below is the reference content brought by Xiaobian, let’s take a look!

Effect Preview


Defines the DOM, contains 3 sub-elements in the container, each child element represents a circle:

Body {margin: 0; Height: 100 VH; Display: flex; align-items: center; justify-content: center; background-color: black;}

  .circles {width: 60Vmin; Height: 60Vmin;}  

Drawing container 1 circle:

.circles {Position: relative;}. Circles span {position: Absolute; Box-Siting: Border-Box; Width: 50%; Height: 50% Background-color: White; Border-Radius: 50%; Left: 25%;}
 Defines the variable, draws a plurality of circles, each circle rotates around the bottom of the first circle, encloses a larger circular shape:   
.circles {–Particles: 3;}. Circles Span {Transform-Origin: Bottom Center; – Deg: Calc (360DEG / VAR (- Particles) * (VAR) -n) – 1)); Transform: Rotate (VAR (- DEG));}. Circles Span: nth-child (1) {–N: 1;}. Circles span: nth-child (2) { –N: 2;}. ​​Circles Span: nth-child (3) {- N: 3;}

Increases animation effects for child elements:

 .circles span {animation: rotating 5s ease-in-out infinite;} @ Keyframes Rotating {0% {Transform: Rotate (0);} 50% {Transform: Rotate (VAR (- DEG) TRANSLATEY (0); 100% {Transform: Rotate (VAR (- DEG)) TranslateY (100%) Scale (2);}}   
Set sub-element mixing mode The part of the overlapping between the sub-element is shown as black:

In order to increase the animation effect in the container, the offset sub-element is enlarged, and the animation is smooth:

.circles {Animation: zoom 5s linear infinite;} @ Keyframes Zoom {TO {Transform: Scale (0.5) TranslateY (-50%);}}
   The DOM element and CSS variables are processed with D3 batch. 

   Drave value is used to assign a variable of the number of circle: 

const count_of_particles = 30; D3.Select (‘. Circles’) .Style (‘- particles’, count_of_particles)

  Generate DOM with D3 Element:  
D3.Select (‘. Circles’) .Style (‘- particles’, count_of_particles) .Selectall (‘span’) .data (D3.Range (count_of_particles) ) .enter () .append (‘span’);

Variables assigned by D3 to indicate sub-elements:

 D3.Select ('. Circles') .Style ('- particles', count_of_particles) .Selectall ('span') .data (D3.Range (count_of_particles)) .Enter () .append ('span') .style ('- N', (D) => D + 1);   Deletes the associated DOM elements in the HTML file and CSS variables in the CSS file.   Finally, the number of circles is adjusted to 30: 
const count_of_particles = 30;

 Thank you for reading ! After reading the above, do you know about the way to use CSS and D3 to overlap the animation effect? I hope that the content of the article will help everyone. If you want to know more about the content, please pay attention to Tumi Yun Industry Information Channel.                      
© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment