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

This article mainly introduces how to use pure CSS to achieve the animation effect of a mobile white rabbit, the article is very detailed, has a certain reference value, interested friends must finish!

Code interpretation

Define dom. The page contains 2 elements that represent rabbits and clouds:

Centered display:

Body {

Margin:0

Height:100vh

Display:flex

Align-items:center

Justify-content:center

Background:linear-gradient (midnightblue,black)

Font-size:30px

}

Draw the body of a rabbit:

.rabbit {

Width:5em

Height:3em

Color:whitesmoke

Background:currentColor

Border-radius:70%90%60%50%

}

Draw the rabbit's eyes with a radial gradient:

.rabbit {

Background:

Radial-gradient (

Circleat4.2em1.4em

# 3330.15em

Transparent0.15em

), / * eye*/

CurrentColor

}

Draw the rabbit's right ear with pseudo elements:

.rabbit:: before {

Content:''

Position:absolute

Width:0.75em

Height:2em

Background-color:currentColor

Border-radius:500

Transform:rotate (- 30deg)

Top:-1em

Right:1em

}

Draw the rabbit's left ear with shadow:

.rabbit:: before {

Border:0.1emsolid

Border-color:gainsborotransparenttransparentgainsboro

Box-shadow:-0.5em00-0.1em

}

Draw the tail of a rabbit with pseudo elements:

.rabbit:: after {

Content:''

Position:absolute

Width:1em

Height:1em

Background-color:currentColor

Border-radius:50%

Left:-0.3em

Top:0.5em

}

Draw the rabbit's legs with shadows:

.rabbit:: after {

Box-shadow:

0.5em1em0

4em1em0-0.2em

4em1em0-0.2em

}

Draw the shadow of the rabbit:

.rabbit {

Box-shadow:-0.2em1em0-0.75em#333

}

Draw a cloud:

.clouds {

Width:2em

Height:2em

Color:whitesmoke

Background:currentColor

Border-radius:1000

Transform:translate (0mai muri 5em)

}

.clouds:: before

.clouds:: after {

Content:''

Position:absolute

Background-color:currentColor

Bottom:0

}

.clouds:: before {

Width:1.25em

Height:1.25em

Border-radius:100000%

Left:-30%

}

.clouds:: after {

Width:1.5em

Height:1.5em

Border-radius:10000%0

Right:-30%

}

Draw 2 more clouds with shadows:

.rabbit {

Z-index:1

}

.clouds

.clouds:: before

.clouds:: after {

Box-shadow:

5em2em0-0.3em

-2em2em00

}

Next, animate the effect.

Add animation of rabbit bouncing:

.rabbit {

Animation:hop3slinearinfinite

}

@ keyframeshop {

20% {

Transform:rotate (- 10deg) translate (1emmam talk 2em)

Box-shadow:-0.2em1em0-1em#333

}

40% {

Transform:rotate (10deg) translate (3emmam Murray 4em)

Box-shadow:-0.2em3.25em0-1.1em#333

}

60% 75% {

Transform:rotate (0deg) translate (4empendium 0)

Box-shadow:-0.2em1em0-0.75em#333

}

}

Increase the stretch animation of the rabbit's legs:

.rabbit:: after {

Animation:kick3sinfinitelinear

}

@ keyframeskick {

40% {

Box-shadow:

0.5em2em0

4.2em1.75em0-0.2em

4.4em1.9em0-0.2em

}

}

Increase the animation of clouds fluttering:

.clouds {

Animation:cloudy3sinfinitelinearforwards

Filter:opacity (0)

}

@ keyframescloudy {

40% {

Transform:translate (- 3emmine 5em)

Filter:opacity (0.75)

}

55% {

Transform:translate (- 4emjiming 5em)

Filter:opacity (0)

}

}

The above is all the contents of the article "how to use pure CSS to achieve the animation effect of a moving white rabbit". 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.