How to use pure CSS to achieve a moving white rabbit animation effect-CSS Tutorial-php.cn

The content of this article is about how to use pure CSS to realize the animation effect of a moving white rabbit. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Effect preview

How to use pure CSS to achieve a moving white rabbit animation effect

Code interpretation

Define dom, the page contains 2 elements, representing rabbits and clouds respectively:

Copy after login

Centered display:

body { margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(midnightblue, black); font-size: 30px; }

Copy after login

Draw the rabbit’s body:

.rabbit { width: 5em; height: 3em; color: whitesmoke; background: currentColor; border-radius: 70% 90% 60% 50%; }

Copy after login

Use radial gradient to draw the rabbit’s eyes:

.rabbit { background: radial-gradient( circle at 4.2em 1.4em, #333 0.15em, transparent 0.15em ), /* eye */ currentColor; }

Copy after login

Use pseudo elements to draw the rabbit’s right ear:

.rabbit::before { content: ''; position: absolute; width: 0.75em; height: 2em; background-color: currentColor; border-radius: 50% 100% 0 0; transform: rotate(-30deg); top: -1em; right: 1em; }

Copy after login

Use shadow to draw the rabbit’s left ear:

.rabbit::before { border: 0.1em solid; border-color: gainsboro transparent transparent gainsboro; box-shadow: -0.5em 0 0 -0.1em; }

Copy after login

Use pseudo elements to draw the rabbit’s tail:

.rabbit::after { content: ''; position: absolute; width: 1em; height: 1em; background-color: currentColor; border-radius: 50%; left: -0.3em; top: 0.5em; }

Copy after login

Draw the rabbit’s legs with shadow:

.rabbit::after { box-shadow: 0.5em 1em 0, 4em 1em 0 -0.2em, 4em 1em 0 -0.2em; }

Copy after login

Draw the rabbit’s shadow:

.rabbit { box-shadow: -0.2em 1em 0 -0.75em #333; }

Copy after login

Draw a cloud:

.clouds { width: 2em; height: 2em; color: whitesmoke; background: currentColor; border-radius: 100% 100% 0 0; transform: translate(0, -5em); } .clouds::before, .clouds::after { content: ''; position: absolute; background-color: currentColor; bottom: 0; } .clouds::before { width: 1.25em; height: 1.25em; border-radius: 100% 100% 0 100%; left: -30%; } .clouds::after { width: 1.5em; height: 1.5em; border-radius: 100% 100% 100% 0; right: -30%; }

Copy after login

Use shadow to draw 2 A cloud:

.rabbit { z-index: 1; } .clouds, .clouds::before, .clouds::after { box-shadow: 5em 2em 0 -0.3em, -2em 2em 0 0; }

Copy after login

Next, create the animation effect.
Add the rabbit jumping animation:

.rabbit { animation: hop 3s linear infinite; } @keyframes hop { 20% { transform: rotate(-10deg) translate(1em, -2em); box-shadow: -0.2em 1em 0 -1em #333; } 40% { transform: rotate(10deg) translate(3em, -4em); box-shadow: -0.2em 3.25em 0 -1.1em #333; } 60%, 75% { transform: rotate(0deg) translate(4em, 0); box-shadow: -0.2em 1em 0 -0.75em #333; } }

Copy after login

Add the rabbit’s leg stretching animation:

.rabbit::after { animation: kick 3s infinite linear; } @keyframes kick { 40% { box-shadow: 0.5em 2em 0, 4.2em 1.75em 0 -0.2em, 4.4em 1.9em 0 -0.2em; } }

Copy after login

Add the cloud fluttering animation:

.clouds { animation: cloudy 3s infinite linear forwards; filter: opacity(0); } @keyframes cloudy { 40% { transform: translate(-3em, -5em); filter: opacity(0.75); } 55% { transform: translate(-4em, -5em); filter: opacity(0); } }

Copy after login

Done!

Related recommendations:

How to use CSS to achieve the effect of truck loader

How to use CSS style to create a good-looking form style? (Code example)

How to implement css style effect when the web page is loaded? (Multiple style examples)

The above is the detailed content of How to use pure CSS to achieve a moving white rabbit animation effect. For more information, please follow other related articles on the PHP Chinese website!