How to realize the dynamic effect of spaceship with CSS and D3

This article introduces to you about how to use CSS and D3 to achieve the dynamic effect of spacecraft, there is a certain reference value, the need for friends can refer to, I hope to help you.

Effect Preview

Code interpretation

Defines the DOM, which spacecraft represents the spaceship, containing 1 elements that represent the tail-ji fins :

<div class= "Spacecraft" >    <div class= "Fins" ></div></div>

Center display:

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

Draw the ship's cabin:

. spacecraft {    width:7em;    Height:11em;    font-size:16px;    Background:         linear-gradient (WhiteSmoke, darkgray);    border-radius:50%/70% 70% 5% 5%;}

Use pseudo-elements to draw the fire from the rear of the ship:

. spacecraft::before {    content: ';    Position:absolute;    Width:6em;    Height:2em;    Background-color: #444;    border-radius:20%;    Top:10em;    left:0.5em;    Z-index:-1;}. Spacecraft::after {    content: ';    Position:absolute;    Box-sizing:border-box;    Width:4em;    Height:4em;    Background:gold;    Top:10em;    left:1.5em;    border-radius:80% 0 50% 45%/50% 0 80% 45%;    Transform:rotate (135deg);    Border:0.5em solid Orange;    Z-index:-2;}

Draw the tail-ji on both sides of the ship:

. fins::before,.fins::after {    content: ';    Position:absolute;    Width:2em;    Height:6em;    Background:linear-gradient (tomato, darkred);    Top:7em;}. Fins::before {left    : -2em;    Border-radius:3em 0 50% 100%;}. Fins::after {right    : -2em;    border-radius:0 3em 100% 50%;}

Draw the ship's porthole with a radial gradient:

. Spacecraft {    background:         radial-gradient (            circle at 3.5em 5em,            transparent 1.5em,            Lightslategray 1.5em, Lightslategray 2em,            transparent 2em        ),        radial-gradient (            circle at 3.3em 5.2em,            deepskyblue 1.4em,            transparent 1.6em        ),        radial-gradient (            circle at 3.5em 5em,            White 1.5em,            transparent 1.5em        ),        linear-gradient (WhiteSmoke, darkgray);}

Increase the animation effect of the spacecraft flame jet:

. spacecraft::after {    animation:flame-spout 0.3s infinite;} @keyframes Flame-spout {    0, 100% {        filter:opacity (0.1);    }    50% {        filter:opacity (1);    }}

Next, Paint the stars.
In the DOM, add a stars container that contains 4 child elements that represent the stars:

<div class= "Stars" >    <span></span>    <span></span>    <span></ span>    <span></span></div><div class= "Rocket" >    <div class= "Fins" ></ Div></div>

Define the style of the star:

. Stars span {    position:absolute;    width:2px;    height:8px;    border-radius:50%;    Background-color:white;    Top:calc (50%-7em);}

Use variables to distribute stars in different positions in the horizontal direction:

. Stars span {    Left:calc (var (--left) * 1vw);}. Stars Span:nth-child (1) {    --left:20;}. Stars Span:nth-child (2) {    --left:40;}. Stars Span:nth-child (3) {    --left:60;}. Stars Span:nth-child (4) {    --left:80;}

Use variables to set the size and opacity of the stars so that each star looks slightly different:

. Stars span {    Width:calc (var (--size) * 1px);    Height:calc (VAR (--size) * 4px);    Filter:opacity (Var (--opacity));}. Stars Span:nth-child (1) {    --size:0.8;    --opacity:0.5;}. Stars Span:nth-child (2) {    --size:1.25;    --opacity:0.6;}. Stars Span:nth-child (3) {    --size:1.5;    --opacity:0.7;}. Stars Span:nth-child (4) {    --size:2;    --opacity:0.8;}

Define the animated effects of stars drifting through space:

. Stars span {    top: -5VH;    Animation:star-move linear Infinite;} @keyframes Star-move {to    {        top:100vh;    }}

Set the duration and delay time of the animation with a variable:

. Stars span {    Animation-duration:calc (var (--duration) * 1s);    Animation-delay:calc (VAR (--delay) * 1s);}. Stars Span:nth-child (1) {    --duration:1;    --delay:-0.05;}. Stars Span:nth-child (2) {    --duration:1.5;    --delay:-0.1;}. Stars Span:nth-child (3) {    --duration:2;    --delay:-0.15;}. Stars Span:nth-child (4) {    --duration:2.5;    --delay:-0.2;}

Hide out-of-screen content:

body {    Overflow:hidden;}

Next, the DOM elements and CSS variables representing the stars are processed in batches using D3.
Introducing the D3 Library:

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

Use D3 to create DOM elements that represent stars:

Const COUNT_OF_STARS = 4;d3.select ('. STARS ').    selectall (' span ').    data (D3.range (count_of_stars))    . Enter ()    . Append (' span ');

With D3 as the CSS variable, the value range of the assignment is 1 to 1, and the range of values is from 0.5 to 0.8 for the value of --left --size --opacity --left --size 2.5 and '--opacity ':

D3.select ('. Stars ').    selectall (' span ').    data (D3.range (Count_of_stars)).    Enter ()    . Append (' span ' )    . Style ('--left ', () = Math.ceil (Math.random () *))    . Style ('--size ', () = Math.random () * 1.5 + 1) 
  .style ('--opacity ', () = Math.random () * 0.3 + 0.5);

Using d3 as the CSS variable --duration and --delay assignment, --duration the value range is 1 to 3, --delay the value is reduced by 0.05:

D3.select ('. Stars ').    selectall (' span ').    data (D3.range (Count_of_stars)).    Enter ()    . Append (' span ' )    . Style ('--left ', () = Math.ceil (Math.random () *))    . Style ('--size ', () = Math.random () * 1.5 + 1) 
  
   .style ('--opacity ', () = Math.random () * 0.3 + 0.5)    . Style ('--duration ', () = Math.random () * 2 + 1)    . sty Le ('--delay ', (d) = + D *-0.05);
  

Delete the associated DOM declarations in the HTML file and the variable declarations in the CSS file.

Finally, increase the number of stars to 30:

Const COUNT_OF_STARS = 30;

Done!