So verwenden Sie CSS und D3, um interaktive Animationen zum Schwimmen kleiner Fische zu implementieren (mit Code)

Der Inhalt dieses Artikels befasst sich mit der Verwendung von CSS und D3 zur Realisierung interaktiver Animationen zum Schwimmen kleiner Fische. Ich hoffe, dass dies für Freunde in Not hilfreich ist Dir helfen.

Effektvorschau

Quellcode-Download

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

Code-Interpretation

Dom definieren, die im Container enthaltenen Unterelemente repräsentieren jeweils den Körper, die Augen, die Rückenflosse und den Schwanz des Fisches:

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

Legen Sie den Seitenstil fest. Für Vollbild ohne Bildlaufleisten:

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

Definieren Sie die Behältergröße des Fisches. --r ist eine grundlegende Größeneinheit, und alle nachfolgenden Größen werden darauf basierend berechnet:

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

Zeichnen Sie den Fischkörper und geben Sie der übergeordneten Klasse die Farbe des Fisches an, da diese Farbe unten verwendet wird:

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

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

Zeichnen Sie die Augen des Fisches:

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

Zeichnen Sie die Rückenflosse des Fisches:

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

Zeichnen Sie den Schwanz des Fisches:

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

Fügen Sie den Animationseffekt hinzu, um den Fisch schwimmen zu lassen. Dies wird nicht in einer Schleife ausgeführt, sondern nur einmal :

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

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

Fügen Sie den Animationseffekt hinzu, wenn der Fisch schwimmt. Schwingender Animationseffekt:

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

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

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

Als nächstes legen Sie einige Variablen fest, um anders aussehende Fische zu erstellen:

Fischgrößenvariable--size, je größer der Wert, desto größer die Größe:

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

Die Farbvariable des Fisches--color, die den Winkel des Farbtonkreises angibt:

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

Die Zeitdauer des Fisches schwimmt von rechts nach links. Je kürzer die Zeit, desto schneller schwimmt er:

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

Je größer die Daten, desto näher befindet er sich am unteren Teil der Seite:

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

Als nächstes verwenden Sie d3, um Dom-Elemente und CSS-Variablen stapelweise zu verarbeiten.
Stellen Sie die d3-Bibliothek vor:

<script></script>

Löschen Sie das .fish-Element im HTML und den Variablendeklarationscode in der CSS-Datei. Erstellen Sie eine Funktion, die einen Fisch generiert. Die Werte von CSS-Variablen werden zufällig generiert. Der Wertebereich von --size beträgt 5 bis 8, der Wertebereich von --color beträgt -60 bis 15, der Wertebereich von --duration beträgt 3 bis 6 Wertebereich von --top Der Wertebereich liegt zwischen 100 und 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');
}

bindet das Mausklickereignis. Wenn die Maus gedrückt wird, wird ein Fisch generiert:

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

window.addEventListener('click', buildFish);

und das Maul des Fisch und die Klickposition liegen auf einer horizontalen Linie:

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

Schließlich werden beim Laden der Seite automatisch 3 Fische generiert, um zu vermeiden, dass die Seite nach dem Laden leer ist:

function buildFish(e) {
    //略....
    .style('--top', e ? e.clientY : d3.randomUniform(100, 300)());
}

d3.range(3).forEach(buildFish);

Du bist fertig!

Verwandte Empfehlungen:

So verwenden Sie reines CSS, um den Texteffekt des Zerreißens von Alufolie zu erzielen (mit Code)

Verwendung reines CSS, um den Animationseffekt einer Sanduhr zu erreichen

Das obige ist der detaillierte Inhalt vonSo verwenden Sie CSS und D3, um interaktive Animationen zum Schwimmen kleiner Fische zu implementieren (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!