How to use CSS and D3 to achieve the effect of cycloid rocking animation

This article brings you the content is about how to use CSS and D3 to achieve the effect of cycloid swing animation, there is a certain reference value, the need for a friend can refer to, I hope you have some help.

Effect Preview

Code interpretation

Defines the DOM, which contains 3 elements, representing 3 cycloidal lines:

<div class= "pendulums" >    <span></span>    <span></span>    <span></ Span></div>

Center display:

body {    margin:0;    HEIGHT:100VH;    Display:flex;    Align-items:center;    Justify-content:center;    Background:linear-gradient (Lightyellow, Burlywood);}

Define the dimensions of the container and draw a fixed cycloidal wall:

. pendulums {    width:40em;    Height:30em;    font-size:10px;    Border-top:0.3em solid Cadetblue;}

Draw a cycloid:

. pendulums {    position:relative;}. Pendulums span {    position:absolute;    Width:0.2em;    height:15em;    Background-color:cadetblue;    left:50%;}

Use pseudo-elements to draw a small ball of cycloidal bottom suspension:

. pendulums Span::before {    content: ';    Position:absolute;    width:1.5em;    height:1.5em;    Background:steelblue;    border-radius:50%;    top:100%;    Left: -0.75em;}

Add light to the ball with a radial gradient:

. pendulums Span::before {    background:radial-gradient (        circle at 70% 35%, White        ,        darkturquoise 30 %,        steelblue 50%    );}

Plot the shadow of a small ball with pseudo-elements:

. pendulums Span::after {    content: ';    Position:absolute;    Width:2em;    Height:0.3em;    Background-color:rgba (0, 0, 0, 0.2);    top:120%;    Left: -1em;    Filter:blur (0.4EM);}

Rotate the cycloid to the left by taking the vertex of the cycloid as the origin point:

. pendulums span {    transform-origin:50% top;    Transform:rotate (25deg);}

Let the cycloid swing up:

. pendulums span {    animation:swing ease-in-out infinite;    animation-duration:1.5s;} @keyframes Swing {    50% {        transform:rotate ( -25deg);    }}

Define subscript variables for each cycloid:

. pendulums Span:nth-child (1) {    --n:1;}. Pendulums Span:nth-child (2) {    --n:2;}. Pendulums Span:nth-child (3) {    --n:3;}

Using variables to set the length of the Cycloid, and the duration of the animation, are gradually increasing arithmetic progression:

. pendulums span {    Height:calc (Var (--n)-1) * 1em + 15em);    Animation-duration:calc ((Var (--n)-1) * 0.02s + 1.5s);}

Next, use D3 to bulk process DOM elements and CSS variables:
Introducing the D3 Library:

<script src= "Https://d3js.org/d3.v5.min.js" ></script>

To create a cycloidal DOM element with D3:

Const COUNT = 3;d3.select ('. pendulums ').    selectall (' span ').    data (D3.range (COUNT)).    Enter ()    . Append (' span ')

Define the subscript variables for the cycloidal with D3:

D3.select ('. pendulums ').    selectall (' span ').    data (D3.range (COUNT)).    Enter ()    . Append (' span ')    . Style ('--n ', (d) = + D + 1);

Delete the relevant DOM definitions in the HTML file and the variable definitions in the CSS file.

Finally, the number of cycloid is adjusted to 15.

Const COUNT = 15;