Use CSS to draw a big white (-)

This time we're going to use CSS to draw an avatar from the Super Marines.

Our approach is to use CSS to dynamically change the position of the background map on an element, and add some linear effects.

See the Pen Baymax Face-hero number 6 by Donovan Hutchinson (@donovanh) on Codepen.

Single element

By using pseudo-classes, we are able to draw parts of the face through an element

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

Style rendering

To make the effect more cool, we've radial-gradient added a subtle gradient of color gradients here on the body to make it more like a head.

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

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

. Baymax { border-bottom: 1.5em solid #000  ; position: Absolute ; top: % ;Left  : % ; width: % ; transform: Translate (-%,-%)  ;}

The first property draws a width-wide 1.5em edge. The absolute position is then positioned at the midpoint of the container (body), where 50% is associated with the size of the container.

The problem is that our present element is from the beginning of the midpoint of the container, but not from the middle position.

To counteract this, we use transform the element to move up by 50% of its width, 40% higher, respectively, to the left.

So the position of the mouth is like this.

Add Eyes

We use before the after pseudo-class to implement the eye, which does not require extra HTML, and is sufficient to use CSS completely.

. Baymax:: Before { background: #000  ; Border-radius: % ; content: ""  ; position: Absolute ; width: em ; height: em ;Left  : -9em ; Top: -6em ; transform: skewx (-4deg)  ;}. Baymax:: after { background: #000  ; Border-radius: % ; content: ""  ; position: Absolute ; width: em ; height: em ;Right  : -9em ; Top: -6em ; transform: skewx (4deg)  ;}

Each pseudo-class has a black background, a 50% border-radius , and is positioned on the side of the mouth. The final use skew of the conversion, so that the eyes closer to the middle, the result becomes this.

Low battery

This is a very interesting scene in the movie, (-) no electricity, its upper and lower eyelids are fighting. We can use the color gradient background and animation to achieve.

First, we give the background two colors, black is used to show the state of open eyes, white means squint. The white part first needs to be positioned outside the eyes and then used to animate the eye face to sag.

. Baymax:: Before { background: linear-gradient (to bottom, #efefef, #efefef , # , #)  ; background-position: 0 -% ; background-size: % ;...}. Baymax:: After {background: linear-gradient (to bottom, #efefef, #efefef , # 50 %, #)  ; background-position: 0 -% ; background-size: % ;...}

We add a linear gradient to the background, making it twice times the height of the container, and positioning the upper part outside the container.

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

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

keyframesThe animation defines some column frames by percent, which is related to the animation execution time, so 50% represents half the time of the animation.

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

The next step is to tell the pseudo-class to execute the animation. animationAdd the attribute.

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

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

In addition, to make the effect more realistic, we after added a 0.1s delay to the pseudo-class, so it looks like the second eye will be a little bit slower and looks even more cute.

Browser compatible

In this example, I omitted the browser compatibility stuff, -webkit and -moz so on. Animation is the need to consider browser compatibility, here I recommend you use a similar autoprefixer tools.

Share GIF version

There is a GIF version that you can freely share online.

This article according to @cssanimation translation, the whole translation with my own understanding and meaning, if there is a bad translation of the place or the wrong, but also ask you to point. If you want to reprint this translation, you must specify the English source: https://cssanimation.rocks/baymax/

Source: http://helkyle.com/2015/05/30/Baymax/

Use CSS to draw a big white (-)