Use CSS to draw a big white image (●-●) and use css to draw a big white image.

Use CSS to draw a big white image (●-●) and use css to draw a big white image.

This time we will use CSS to draw a big white picture in the super Marine Corps.

Our approach 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 huchinson (@ donovanh) on CodePen.

Single element

By using pseudo classes, we can draw parts of a face through an element.

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

Style Rendering

To make the effect more cool, we use it on the body.radial-gradientAdded a subtle color gradient change to make it more like a header.

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

Next, we locate the face, and the mouth is just a black line. We useborder.

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

The first property draws a width1.5em. Then useabsoluteLocate and set the position to the midpoint of the container (body). 50% is related to the container size.

The problem is that our current element is starting from the container's midpoint, but not out of the middle position.

To offset, we usetransformMove the element to the left and upward respectively according to its own width of 50% and height of 40%.

So the mouth is like this.

Add eyes

We usebefore,afterThe pseudo class is used to implement the eyes. No extra HTML is required, and CSS is enough.

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

Each pseudo-class has a black background and a 50%border-radiusAnd are located at the edge of the mouth. Last useskewThe conversion turns the eyes closer to the center and the result is like this.

Low Power

This is a very interesting scene in the movie. (●-●) No electricity, and its upper and lower eyelids are fighting. We can use color gradient backgrounds and animations.

First, we give two colors to the background. Black is used to show the opening state, and white represents the blinking. At the beginning, the white part needs to be located outside the eyes, and then the animation is used to bring down the eyes.

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

We add a linear gradient background to double the height of the container and position the upper half outside the container.

With the background, we can usekeyframesAnimation to control the entire action.

@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 percentage. The percentage is related to the animation execution time, So 50% represents half of the animation time.

Here we will make a blinking animation between 50% and 85%.

The next step is to tell the pseudo class to execute the animation. SetanimationAttribute.

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

The above Code sets the execution time to 6 seconds and will keep repeating.

In addition, to make the effect more realistic, weafterThe pseudo class adds a latency of S, so it seems that the second eye will be a little slower and look more cute.

Browser compatibility

In this example, I omitted the browser compatibility,-webkit,-mozAnd so on. Animation requires browser compatibility. Here I recommend you use tools similar to Autoprefixer.

Share gif version

The gif version is available here. You can share it online at will.

According to @ cssanimation, the entire translation contains my own understanding and meaning. If the translation is poor or incorrect, please give us some advice. If you need to reprint this translation, must indicate the English Source: https://cssanimation.rocks/baymax/

Http://helkyle.com/2015/05/30/Baymax/.