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

This article mainly introduces how to use pure css code to achieve the loader animation effect of the car, the article introduces in great detail, has a certain reference value, interested friends must read it!

Code interpretation

Define dom, the container contains a .car element, and its two child elements represent the body and wheels, respectively:

Centered display:

Body {

Margin:0

Height:100vh

Display:flex

Align-items:center

Justify-content:center

Background-color:#333

}

Define the container size and color of the car:

.loader {

Width:11.7em

Height:4.2em

Color:lightcyan

Position:relative

}

Draw the chassis:

.car {

Position:absolute

Width:inherit

Height:2em

Background-color:currentColor

Top:1.5em

Border-radius:05em1em0/04em1em0

}

Draw the tail:

.car:: before {

Content:''

Position:absolute

Width:0

Height:0

Border:0.6emsolidtransparent

Border-left-width:0

Border-right-color:currentColor

Transform-origin:left

Transform:rotate (- 45deg)

Top:-0.5em

}

(it looks a bit like a plane at this time, )

Draw the car body:

.body {

Position:absolute

Width:7.5em

Height:3.5em

Box-sizing:border-box

Border:0.4emsolid

Border-radius:3em4.5em00/3em4em00

Top:-1.5em

Left:1.2em

}

Draw the window with pseudo elements:

.body:: before {

Content:''

Position:absolute

Width:3.5em

Height:inherit

Background-color:currentColor

Border-top-left-radius:inherit

Left:-0.4em

Top:-0.4em

}

Draw the outline of the wheel:

.wheels:: before

.wheels:: after {

Content:''

Position:absolute

Box-sizing:border-box

Width:2.6em

Height:2.6em

Background-color:#333

Border-radius:50%

Bottom:-1em

}

Draw the hub:

.wheels:: before

.wheels:: after {

Border:0.3emsolid#333

Background-image:

Linear-gradient (

135deg

Transparent45%

CurrentColor46%,currentColor54%

Transparent55%

),

Linear-gradient (

90deg

Transparent45%

CurrentColor46%,currentColor54%

Transparent55%

),

Linear-gradient (

45deg

Transparent45%

CurrentColor46%,currentColor54%

Transparent55%

),

Linear-gradient (

0deg

Transparent45%

CurrentColor46%,currentColor54%

Transparent55%

),

Radial-gradient (

CurrentColor29%

Transparent30%,transparent50%

CurrentColor51%

)

}

Position the wheels on the left and right sides:

.wheels:: before {

Left:1.2em

}

.wheels:: after {

Right:0.8em

}

Next, animate the effect.

Add the dom element .strikes for the wind shadow, which contains 5 child elements:

Draw 5 short lines:

.strikes {

Position:absolute

Width:1em

Height:inherit

Border:1pxdashedwhite

Display:flex

Flex-direction:column

Justify-content:space-between

}

.strikesspan {

Height:0.1em

Background-color:lightcyan

}

Increase the animation effect of the wind shadow, define the css variable, and set the animation delay:

.strikesspan {

Animation:drift0.2slinearinfinite

Animation-delay:calc ((var (--n)-1) * 0.05s)

}

@ keyframesdrift {

From {

Transform:translate (3.5em)

}

To {

Transform:translate (- 8em)

Filter:opacity (0)

}

}

.strikesspan:nth-child (1) {

-- nRO 1

}

.strikesspan:nth-child (2) {

-- nRO 2

}

.strikesspan:nth-child (3) {

-- nRO 3

}

.strikesspan:nth-child (4) {

-- nRO 4

}

.strikesspan:nth-child (5) {

-- nRO 5

}

Increase the animation of wheel rotation:

.wheels:: before

.wheels:: after {

Animation:rotating0.5slinearinfinite

}

@ keyframesrotating {

To {

Transform:rotate (1turn)

}

}

Increase the animation effect of body bumps:

.car {

Animation:run0.25slinearinfinite

}

@ keyframesrun {

0% {

Transform:translate (0.2emmem0.1em) rotate (0deg)

}

20% {

Transform:translate (0.1em.0.2em) rotate (1deg)

}

40% {

Transform:translate (0.1m) rotate (- 1deg)

}

60% {

Transform:translate (- 0.1emmem0.2em) rotate (0deg)

}

80% {

Transform:translate (- 0.1emmem0.1em) rotate (1deg)

}

100% {

Transform:translate (0.2em.0.1em) rotate (- 1deg)

}

}

The above is all the content of this article "how to use pure css code to achieve the loader animation effect of racing car". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

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.