Shulou(Shulou.com)05/31 Report--

This article mainly introduces how to use CSS to draw a lovely cartoon lion animation related knowledge, the content is detailed and easy to understand, the operation is simple and fast, with a certain reference value, I believe that after reading this article on how to use CSS to draw a lovely cartoon lion animation article will have a harvest, let's take a look.

Demo

Text

Basic drawing

Let's start with Kangkang. What are the parts of the lion?

From the above view, the lion is made up of ears + eyes + nose + beard + mouth + mane + forelegs + claws + tail. I believe it is not difficult to see that many parts can be completed by very simple rectangular and fillet sentences. For example, the eyes are made of two circles stacked on top of each other. You can take a look at the code demonstration above. Here we don't talk too much about these basic graphics.

Next, let's talk about some graphics that are difficult to draw.

Ear

You can see that it looks like a semicircle, like a petal, it is certainly not easy to achieve if you use the conventional method to do it, but you can use the clip-path attribute, which is to create a displayable area of the element using cropping, the part within the area is displayed, and the hidden outside the area. When we draw the ear, we use the method of clipping the ellipse ellipse in this area, the two values are passed in to represent the radius of the cut, and the two values after at represent the coordinates of the trimmed x and y axes.

Ear {width: 70px; height: 70px; position: absolute; top: 10px; background-color: var (--skin-color); z-index: 9; border-radius: 40px; clip-path: ellipse (100% at-20-10%);}

Similarly, the semicircle-like body is also achieved through clip-path: ellipse, of course, more than that he can cut out any shape, it can be said to be very powerful.

Nose

The nose is a triangle and constitute, css triangle drawing is also a small skill, that is, set width and height to 0, simply use the border attribute to complete, set border-width to replace the width and height of the block, but the interior of the block is made of four small triangles into a rectangle, and then because the arrangement is in the order of the upper right, lower left, so long as you assign a value to the color of one of the angles, you can achieve a triangle.

.nose {width: 0px; height: 0px; border-width: 20px 30px; border-style: solid; border-color: var (--eye-color) transparent transparent transparent; position: absolute; left: 50%; top: 50%; transform: translate (- 50%,-50%); margin-top: 40px; z-index: 3;}

tail

The tail is also mainly realized by border, draw a rectangular div block, let him rotate a certain angle, then draw only one of the borders, and then use border-radius: 40% 50%, give it a sense of bending is done.

.tail {width: 320px; height: 320px; position: absolute; top:-137px; border-style: solid; border-width: 30px; border-radius: 40% 50%; border-color: transparent var (--tail-color) transparent transparent; transform: rotate (125deg); left:-180px;}

Animation production

Wag one's tail

The strength of the tail comes from the root of the tail, so we need to do a slight swing rotation animation from the root, so we take advantage of the transform-origin attribute, which allows you to change the origin of the deformation of an element, for example, the root force can be directly set to transform-origin: 50% can also be written as transform-origin: center bottom.

The first parameter represents the offset value that defines the center of the deformation from the left side of the box model.

Keywordvalueleft0%center50%right100%

The second parameter represents the offset value that defines the deformation center from the top of the box model.

Keywordvaluetop0%center50%bottom100%

The slight rotation offset of the following animation depends on the code block below, which is very simple and only needs to fine-tune some angles and offsets. One more thing to add here, the transformation of transform must be the positioning element of the box model.

.tail {/ /... Animation: 1s wagging ease-in-out infinite alternate forwards; transform-origin: 50% 100%;} @ keyframes wagging {0% {transform: rotate (125deg) translateX (0) translateY (0px);} 100% {transform: rotate (130deg) translateX (15px) translateY (- 15px);}}

Blink one's eyes

A blink of an eye will make the lion look more vivid, but if you animate it by reducing the height, it will look very ugly because even the white eyes will compress and deform. So we still extend the clipping range from the top and bottom to the middle through the clip-path attribute, using the ellipse method, until 2% leaves a gap.

.eye {/ /... Animation: 4s blinking infinite forwards; overflow: hidden;} @ keyframes blinking {0%, 40%, 80% {clip-path: ellipse (100% at 50% 48%);} 60%, 100% {clip-path: ellipse (100% 2% at 50% 48%);} on "how to use CSS to draw a lovely cartoon lion animation" this article is introduced here, thank you for reading! I believe that "how to use CSS to draw a lovely cartoon lion animation" knowledge have a certain understanding, if you want to learn more 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.