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

This article "CSS how to achieve the effect of truck loader" is not quite understood by most people except programmers. Today, in order to make you better understand "how CSS achieves the effect of truck loader", the editor summarizes the following content, which has a certain reference value. The detailed steps are clear and the details are handled properly. I hope you can get something through this article. Let's take a look at the specific content.

Code interpretation

Define dom, the container represents the truck, the two sub-elements represent the front and exhaust, and represent the road:

Center the display while leaving space between the road and the page:

Body {

Margin:10%

Padding-top:10%

}

Draw the truck compartment:

.truck {

Width:15em

Height:5em

Font-size:10px

Background-color:#444

Border-radius:0.4em

}

Draw the wheels of the car with pseudo elements:

.truck {

Position:relative

}

.truck:: before

.truck:: after {

Content:''

Position:absolute

Box-sizing:border-box

Width:2em

Height:2em

Background-color:#444

Border:0.1emsolidwhite

Border-radius:50%

Bottom:-1em

}

.truck:: before {

Left:0.6em

}

.truck:: after {

Right:0.6em

}

Draw the front of the car:

.cab {

Position:absolute

Width:3.3em

Height:2.5em

Background-color:#333

Left:-3.5em

Bottom:0

Border-radius:40.4em0.4em

}

.cab:: before {

Content:''

Position:absolute

Width:2em

Height:1.5em

Background-color:#333

Top:-1.5em

Right:0

Border-radius:1000

}

Draw the wheels in front of the car:

.cab:: after {

Content:''

Position:absolute

Box-sizing:border-box

Width:2em

Height:2em

Background-color:#444

Border:0.1emsolidwhite

Border-radius:50%

Bottom:-1em

Left:0.5em

}

Draw the initial state of the exhaust:

.smoke

.smoke:: before

.smoke:: after {

Content:''

Position:absolute

Width:1em

Height:1em

Background-color:#333

Right:-0.1em

Bottom:-0.5em

Border-radius:50%

}

Add animation to exhaust:

.smoke {

Animation:smoke-12sinfinite

}

.smoke:: before {

Animation:smoke-22sinfinite

}

.smoke:: after {

Animation:smoke-32sinfinite

}

@ keyframessmoke-1 {

To {

Width:3em

Height:3em

Right:-3em

Bottom:0.5em

}

}

@ keyframessmoke-2 {

To {

Width:2.5em

Height:2.5em

Right:-6em

Bottom:0.8em

}

}

@ keyframessmoke-3 {

To {

Width:3.5em

Height:3.5em

Right:-4em

Bottom:0.2em

}

}

Increase the drift effect of tail gas:

.smoke {

Animation:

Drift2sinfinite

Smoke-12sinfinite

}

.smoke:: before {

Animation:

Drift3sinfinite

Smoke-23sinfinite

}

.smoke:: after {

Animation:

Drift4sinfinite

Smoke-34sinfinite

}

@ keyframesdrift {

0% 100% {

Filter:opacity (0)

}

15% {

Filter:opacity (0.9)

}

}

Increase the animation of truck driving:

.truck {

Animation:

Move5sinfinite

}

@ keyframesmove {

0% {

Margin-left:90%

}

50% {

Margin-left:45%

}

100% {

Margin-left:0

}

0% 100% {

Filter:opacity (0)

}

10% 90% {

Filter:opacity (1)

}

}

Increase the animation effect of bumps in card driving:

.truck {

Animation:

Put-put2sinfinite

Move10sinfinite

}

@ keyframesput-put {

0% {

Margin-top:0

Height:5em

}

5% {

Margin-top:-0.2em

Height:5.2em

}

20% {

Margin-top:-0.1em

Height:5em

}

35% {

Margin-top:0.1em

Height:4.9em

}

40% {

Margin-top:-0.1em

Height:5.1em

}

60% {

Margin-top:0.1em

Height:4.9em

}

75% {

Margin-top:0

Height:5em

}

80% {

Margin-top:-0.4em

Height:5.2em

}

100% {

Margin-top:0.1em

Height:4.9em

}

}

Three ways of introducing css 1. Inline style, the most straightforward and simplest, uses style= "" directly for HTML tags. two。 The embedded style is to write the CSS code in between and use the

To make a statement. 3. External style, in which the link style is the most frequently used and the most practical style, only need to add

Just do it. The second is to import styles, import styles and link styles are similar, using @ import style to import CSS stylesheets, not recommended. Thank you for your reading. I hope you have a certain understanding of the key question of "how to achieve the effect of truck loader". The specific use needs to be understood by everyone through hands-on experiments. Try it quickly. If you want to read more articles on relevant knowledge points, 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.