Use CSS to draw a clear picture (●-●)_html/css

Use CSS to draw a clear picture (●-●)_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:43:36

Original

1145 people have browsed it

This time we will use CSS to draw the avatar of Baymax from Super Marines.

What we do is to use CSS to dynamically change the position of the background image on an element, and add some linear effects.

See the Pen Baymax face - Hero Number 6 by Donovan Hutchinson (@donovanh) on CodePen. The part that shows the face

Style rendering

In order to make the effect cooler, we use radial-gradient on the body to add subtle color gradient changes to make it more like a head.

<div class="baymax"></div>

Copy after login

Next, we position the face. The mouth is just a black line, and we use border to achieve it.

body { background: radial-gradient(center, #fff, #fff 50%, #aaa); background-size: 100%; background-repeat: no-repeat; height: 100vh; }

Copy after login

The first attribute draws a side with a width of 1.5em. Then use absolute positioning to set the position at the midpoint of the container (body). 50% here is related to the size of the container.

The problem is that our element now starts at the midpoint of the container, but not out of the middle.

.baymax { border-bottom: 1.5em solid #000; position: absolute; top: 50%; left: 50%; width: 50%; transform: translate(-50%, -40%); }

Copy after login

In order to offset, we use transform to move the element to the left and up according to 50% of its own width and 40% of its height.

So the position of the mouth is like this

Add eyes

We use before and after pseudo-classes to implement the eyes, which does not require extra HTML , and using CSS entirely is enough.

Each pseudo-class has a black background, a 50% border-radius, and is positioned at the edge of the mouth. Finally, use skew transformation to move the eyes a little closer to the middle, and the result becomes like this.

.baymax::before { background: #000; border-radius: 50%; content: ""; position: absolute; width: 12em; height: 12em; left: -9em; top: -6em; transform: skewX(-4deg); }.baymax::after { background: #000; border-radius: 50%; content: ""; position: absolute; width: 12em; height: 12em; right: -9em; top: -6em; transform: skewX(4deg); }

Copy after login

Low battery

This is a very interesting scene in the movie. (●?●) The battery is out and its upper and lower eyelids are fighting. We can do this using color gradient backgrounds and animations.

First, we give the background two colors, black to show the state of open eyes, and white to represent squinting. The white part needs to be positioned outside the eyes initially, and then animation is used to make the eyes droop.

We added a linear gradient background, making it twice the height of the container and positioning the top half outside the container.

With the background, we can control the entire action through keyframes animation.

.baymax::before { background: linear-gradient(to bottom, #efefef, #efefef 50%, #000 50%, #000); background-position: 0 -100%; background-size: 200%; ... } .baymax::after { background: linear-gradient(to bottom, #efefef, #efefef 50%, #000 50%, #000); background-position: 0 -100%; background-size: 200%; ... }

Copy after login

The keyframes animation defines a series of frames through percentages. The percentages are related to the animation execution time, so 50% represents half of the animation time.

Here we do the blink animation 50% to 85% of the time.

@keyframes blink {  0%, 50% { background-position: 0 100%; }  85%, 95% { background-position: 0 75%; }  100% { background-position: 0 100%; }}

Copy after login

The next step is to tell the pseudo class to perform this animation. Add the animation attribute.

The above code sets the execution time to 6 seconds and will loop forever.

In addition, in order to make the effect more realistic, we added a 0.1s delay to the after pseudo-class, so it seems that the second eye will be a little slower and look more cute.

.baymax::before { animation: blink 6s infinite; ... } .baymax::after { animation: blink 6s 0.1s infinite; ... }

Copy after login

Browser Compatibility

In this example, I omitted the browser compatibility stuff, -webkit, -moz, etc. Animation needs to consider browser compatibility. Here I recommend you to use a tool like Autoprefixer.

Share the gif version

There is a gif version here, you can share it online as you like.

This article is translated by @cssanimation. The entire translation contains my own understanding and meaning. If there is anything that is not translated well or is wrong, please give me some advice. If you want to reprint this translation, please indicate the English source: https://cssanimation.rocks/baymax/