How to use pure CSS to realize the animation effect of a moving white rabbit
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!
