How to use CSS and D3 to implement interactive animation of small fish swimming (with code)-CSS Tutorial-php.cn

How to use CSS and D3 to implement interactive animation of small fish swimming (with code)

不言

Release： 2018-08-29 13:47:25

Original

2955 people have browsed it

The content of this article is about how to use CSS and D3 to realize interactive animation of small fish swimming (with code). It has certain reference value. Friends in need can refer to it. I hope It will help you.

Effect preview

How to use CSS and D3 to implement interactive animation of small fish swimming (with code)

Source code download

https://github.com/comehope/front- end-daily-challenges

Code Interpretation

Define dom, the sub-elements contained in the container represent the body, eyes, dorsal fin and tail of the fish respectively:

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

Copy after login

Set page style For full screen and no scroll bars:

body {
    margin: 0;
    width: 100vw;
    height: 100vh;
    background-color: #222;
    overflow: hidden;
}

Copy after login

Define the container size of the fish, --r is a basic size unit, and all subsequent sizes are calculated based on it:

.fish {
    position: absolute;
    --r: 15vw;
    width: calc(var(--r) + var(--r) / 3);
    height: calc(var(--r) * 2);
    left: 50%;
    top: 100px;
}

Copy after login

Draw the body of the fish, and declare the color of the fish to the parent class, because this color will be used below:

.fish {
    color: hsl(0, 50%, 50%);
}

.fish .body {
    position: absolute;
    border: var(--r) solid transparent;
    border-right-color: currentColor;
    border-left-style: none;
}

Copy after login

Draw the eyes of the fish:

.fish .eye {
    position: absolute;
    --r1: calc(var(--r) / 4);
    width: var(--r1);
    height: var(--r1);
    background-color: #111;
    border-radius: 50%;
    top: 35%;
    left: 30%;
}

Copy after login

Draw The dorsal fin of the fish:

.fish .fin {
    position: absolute;
    --r2: calc(var(--r) / 2);
    border-bottom: var(--r2) solid;
    border-left: var(--r2) solid transparent;
    filter: brightness(2.5);
    left: calc(var(--r) - var(--r2));
}

Copy after login

Draw the tail of the fish:

.fish .tail {
    position: absolute;
    --r3: calc(var(--r) / 3);
    border: var(--r3) solid transparent;
    border-right-color: currentColor;
    border-left-style: none;
    right: 0;
    top: calc(var(--r) - var(--r3));
}

Copy after login

Add the animation effect for the fish to swim, not to execute it in a loop, but only once:

.fish {
    right: calc(var(--r) * -1);
    animation: run 3s linear forwards;
}

@keyframes run {
    to {
        right: 100%;
    }
}

Copy after login

Then add the animation effect of the swaying of the fish when swimming:

.fish {
    animation: 
        run 3s linear forwards,
        shake 0.3s linear infinite;
}

@keyframes shake {
    50% {
        transform: rotateY(-30deg);
    }

    100% {
        transform: rotateY(30deg);
    }
}

Copy after login

Next, set some variables to create different-looking fish:

Variables for the size of the fish--size, the larger the value, the larger the size:

.fish {
    --size: 5;
    --r: calc(var(--size) * 1vw);
}

Copy after login

The color variable of the fish--color, indicating the angle of the hue circle:

.fish {
    --color: 0;
    color: hsl(var(--color), 50%, 50%);
}

Copy after login

The fish swims from the right to the left The duration on the side, the shorter the duration, the faster the fish swims:

.fish {
    --duration: 3;
    animation: 
        run calc(var(--duration) * 1s) linear forwards,
        shake 0.3s linear infinite;
}

Copy after login

The height at which the fish appears, the larger the data, the closer it is to the lower part of the page:

.fish {
    --top: 100;
    top: calc(var(--top) * 1px);
}

Copy after login

Next, use d3 to batch process dom elements and css variables .
Introduce the d3 library:

<script></script>

Copy after login

Delete the .fish element in the html and the variable declaration code in the css file. Create a function that generates a fish. The values of css variables are randomly generated. The value range of --size is 5 ~ 8, the value range of --color is -60 ~ 15, - The value range of -duration is 3 ~ 6, the value range of --top is 100 ~ 300:

function buildFish() {
    let fish = d3.select('body')
        .append('p')
        .attr('class', 'fish')
        .style('--size', d3.randomUniform(5, 8)())
        .style('--color', d3.randomUniform(-60, 15)())
        .style('--duration', d3.randomUniform(3, 6)())
        .style('--top', d3.randomUniform(100, 300)());
    
    fish.append('span').attr('class', 'body');
    fish.append('span').attr('class', 'eye');
    fish.append('span').attr('class', 'fin');
    fish.append('span').attr('class', 'tail');
}

Copy after login

binds the mouse click event. When the mouse is pressed A fish is generated when the It goes blank after loading:

function buildFish(e) {
    //略....
    .style('--top', e.clientY);
}

window.addEventListener('click', buildFish);

Copy after login

Done!

Related recommendations:

How to use pure CSS to achieve the text effect of tearing tinfoil (with code)

How to use pure CSS to achieve it Animation effect of an hourglass

The above is the detailed content of How to use CSS and D3 to implement interactive animation of small fish swimming (with code). For more information, please follow other related articles on the PHP Chinese website!