How to use CSS and D3 to achieve dynamic effects of spaceships

This article introduces to you how to use CSS and D3 to achieve the dynamic effect of a spaceship. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Effect Preview

##Code Interpretation

Definition dom,

spacecraft represents the spacecraft, and the container contains 1 element representing the tail fins:

<div>
    <div></div>
</div>

Centered display:

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(black, midnightblue);
}

Draw the spaceship 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 flames at the tail of the spacecraft:

.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 tails on both sides of the spacecraft:

.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%;
}

Use radial gradient to draw the spacecraft Porthole:

.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 ship’s flame jet:

.spacecraft::after {
    animation: flame-spout 0.3s infinite;
}

@keyframes flame-spout {
    0%, 100% {
        filter: opacity(0.1);
    }

    50% {
        filter: opacity(1);
    }
}

Next, draw the starry sky.

Add the
stars container in the dom, which contains 4 sub-elements representing stars:

    
    
    
    

<div>
    <div></div>
</div>

Define the style of the stars:

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

Use variables to distribute the 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 animation effect of stars floating through space :

.stars span {
    top: -5vh;
    animation: star-move linear infinite;
}

@keyframes star-move {
    to {
        top: 100vh;
    }
}

Use variables to set the duration and delay time of the animation:

.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 the content outside the screen:

body {
    overflow: hidden;
}

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

Introduce d3 library:

<script></script>

Use d3 to create dom elements representing stars:

const COUNT_OF_STARS = 4;

d3.select('.stars')
    .selectAll('span')
    .data(d3.range(COUNT_OF_STARS))
    .enter()
    .append('span');

Use d3 as css variable

--left, -- size, --opacity assignment, the value range of --left is 1 to 100, the value range of --size is 1 to 2.5, the value range of '--opacity' is 0.5 to 0.8:

d3.select('.stars')
    .selectAll('span')
    .data(d3.range(COUNT_OF_STARS))
    .enter()
    .append('span')
    .style('--left', () => Math.ceil(Math.random() * 100))
    .style('--size', () => Math.random() * 1.5 + 1)
    .style('--opacity', () => Math.random() * 0.3 + 0.5);

Use d3 to assign values ​​to css variables

--duration and --delay,# The value range of ##--duration is 1 to 3, and the value of --delay is reduced by 0.05: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">d3.select('.stars')     .selectAll('span')     .data(d3.range(COUNT_OF_STARS))     .enter()     .append('span')     .style('--left', () =&gt; Math.ceil(Math.random() * 100))     .style('--size', () =&gt; Math.random() * 1.5 + 1)     .style('--opacity', () =&gt; Math.random() * 0.3 + 0.5)     .style('--duration', () =&gt; Math.random() * 2 + 1)     .style('--delay', (d) =&gt; d * -0.05);</pre><div class="contentsignin">Copy after login</div></div>Delete the relevant dom statement in the html file and variable declarations in css files.

Finally, increase the number of stars to 30:

const COUNT_OF_STARS = 30;

You’re done!

Recommended related articles:

How to use pure CSS to achieve the effect of a Saturn

How to use CSS and D3 to achieve endless six sides The effect of shape space

The above is the detailed content of How to use CSS and D3 to achieve dynamic effects of spaceships. For more information, please follow other related articles on the PHP Chinese website!