Shulou(Shulou.com)06/01 Report--

Editor to share with you how to use CSS and D3 to achieve interactive animation of small fish swimming, I hope you will gain something after reading this article, let's discuss it together!

Code interpretation

Define dom, which contains child elements that represent the fish's body, eyes, dorsal fin, and tail, respectively:

Set the page style to full screen and no scroll bar:

Body {

Margin:0

Width:100vw

Height:100vh

Background-color:#222

Overflow:hidden

}

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

.fish {

Position:absolute

-- r:15vw

Width:calc (var (--r) + var (--r) / 3)

Height:calc (var (--r) * 2)

Left:50%

Top:100px

}

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

.fish {

Color:hsl (050% 50% 50%)

}

.fish.body {

Position:absolute

Border:var (--r) solidtransparent

Border-right-color:currentColor

Border-left-style:none

}

Draw the fish's eyes:

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

}

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) solidtransparent

Filter:brightness (2.5)

Left:calc (var (--r)-var (--R2))

}

Draw the tail of the fish:

.fish.tail {

Position:absolute

-r3:calc (var (--r) / 3)

Border:var (--R3) solidtransparent

Border-right-color:currentColor

Border-left-style:none

Right:0

Top:calc (var (--r)-var (--R3))

}

Increase the animation effect of making the fish swim, not in a loop, but only once:

.fish {

Right:calc (var (--r) *-1)

Animation:run3slinearforwards

}

@ keyframesrun {

To {

Right:100%

}

}

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

.fish {

Animation:

Run3slinearforwards

Shake0.3slinearinfinite

}

@ keyframesshake {

50% {

Transform:rotateY (- 30deg)

}

100% {

Transform:rotateY (30deg)

}

}

Next, set some variables to create different fish:

The variable of fish size-size, the larger the value, the larger the size:

.fish {

-- size:5

-r:calc (var (--size) * 1vw)

}

The color variable of the fish, color, represents the angle of the hue ring:

.fish {

-- color:0

Color:hsl (var (--color), 50% focus 50%)

}

The length of time a fish swims from the right to the left, the shorter the time, the faster the fish swim:

.fish {

-- duration:3

Animation:

Runcalc (var (--duration) * 1s) linearforwards

Shake0.3slinearinfinite

}

The height at which the fish appears, the larger the data, the closer to the bottom of the page:

.fish {

-- top:100

Top:calc (var (--top) * 1px)

}

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

Introduce the d3 library:

Remove the .fish element in html and the variable declaration code in the css file. Create a function to generate a fish. The values of css variables are all randomly generated. The value range of size is 5: 8. The range of size is-60, 15, and the range of values is 3. 6, and the range of values is 100. 300:

FunctionbuildFish () {

Letfish=d3.select ('body')

.append ('p')

.attr ('class','fish')

.style ('--size',d3.randomUniform (5jin8) ())

.style ('--color',d3.randomUniform (- 60 color',d3.randomUniform 15) ())

.style ('--duration',d3.randomUniform (3jue 6) ())

.style ('--top',d3.randomUniform (100300) ())

Fish.append ('span'). Attr (' class','body')

Fish.append ('span'). Attr (' class','eye')

Fish.append ('span'). Attr (' class','fin')

Fish.append ('span'). Attr (' class','tail')

}

Bind the mouse click event to generate a fish when the mouse is pressed:

FunctionbuildFish (e) {

/ / slightly.

.style ('--top',e.clientY)

}

Window.addEventListener ('click',buildFish)

And let the mouth of the fish and the position of the click on a horizontal line:

.fish {

Top:calc (var (--top) * 1px-var (--r))

}

Finally, 3 fish are automatically generated when the page is loaded to avoid a blank space after the page is loaded:

FunctionbuildFish (e) {

/ / slightly.

.style ('--top',e?e.clientY:d3.randomUniform (100300) ())

}

D3.range (3) .forEach (buildFish)

After reading this article, I believe you have a certain understanding of "how to use CSS and D3 to realize the interactive animation of small fish swimming". If you want to know more about it, welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.