How to use pure CSS to realize a mobile small white rabbit animation effect

This article mainly introduces how to use pure CSS to realize a mobile small white rabbit animation effect, have a reference value, and friends who need it can be referred to. I hope that everyone has a big gain after reading this article. Let’s take a look at you with everyone.

怎么使用纯CSS实现一只移动的小白兔动画效果

Defines the DOM, the page contains 2 Elements represent rabbits and clouds:

  
Creation:
Body {margin: 0; Height: 100 VH; Display: flex; align-item; center; justify-content: center; background: linear-gradient (MidnightBlue, Black); font-size : 30px;}
Draw a rabbit body:

.rabbit {width: 5em; Height: 3em; Color: Whitesmoke; Background : CurrentColor; Border-Radius: 70% 90% 60% 50%;}
   
The eye of the rabbit is drawn by a radial gradient:

.rabbit {background: Radial-Gradient (Circle AT 4.2EM 1.4EM,# 333 0.15EM, Transparent 0.15EM), / * Eye * / CurrentColor;}
   
Draw the right ear of rabbits with a dummy element:

.rabbit :: before {content: ”; Position: absolute; width: 0.75em; Height: 2em; Background-Color: 40% 100% 0 0; Transform: rotate (-30deg) Top: -1em; Right: 1em;}
  Draws the left ear of rabbits with shadows:  

. barbit :: before { Border: 0.1em Solid; Border-Color: Gainsboro Transparent Transparent Gainsboro; Box-shadow: -0.5em 0 0-0.1em;}

  Draw the tail of the rabbit with a dummy:  
.rabbit :: after {Content: ”; Position: Absolute; Width: 1em; Height: 1em; Background-Color: CurrentColor; Border-Radius: 50%; Left: -0.3em; TOp: 0.5em;}

Picture of rabbit with shadow:

 . Rabbit :: after {Box-shadow: 0.5em 1 Em 0, 4EM 1EM 0-0.2EM, 4EM 1EM 0-0.2em;}  
Draw a shadow of rabbits:

. Barbit {Box-shadow: -0.2em # 333;}
   
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;}: 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%;}
   Draw 2 clouds with shadows: 

. Rabbit {z-index: 1;}. clouds, .clouds :: before, .clouds :: after {box-shadow: 5em 2em 0-0.3em, -2em 2EM 0 0;}
   Next, animation effects are made. 
Increase the animation of rabbit beating:

.rabbit {Animation: hop 3s linear infinite;} @ Keyframes Hop {20% {Transform: Rotate (-10deg) Translate (1EM,) 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;}}

  Increase the telescopic animation of the rabbit legs:  

.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;}}

  Increased clouds 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);}}


Thank you for reading this article carefully, I hope that Xiaobian share how to use pure CSS to achieve a mobile Xiaobai rabbit animation effect content help everyone, and I hope you support Tumi cloud, pay attention to Tumi Cloud Industry information channel, I will find TUMI clouds in trouble, detailed solutions are waiting for you!
                    
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment