First, browser rendering principle

It can be divided into five parts

  1. The rendering engine first parses HTML and CSS documents, building HTMLS trees (DOM) and CSS trees (CSSOM).
  2. Merge the two trees to create the Rendering Tree.
  3. Layout computes information for each node from the render tree, including document flow, box model, and element size and location.
  4. Paint Draws the entire page based on the calculated information. Draw in border colors, text colors, shadows, etc.
  5. Compose, according to the cascade relationship display screen.

2. Create animations with CSS (transitionandanimation)

1.transitionProperties make animation transitions

The transition property can be specified as a transition effect of one or more CSS properties separated by commas.

The general syntax is as follows:

/ * the property name | duration | transition effects (here fade in and fade out) | delay time * /
transition: margin-right 4s ease-in-out 1s;
Copy the code

If you want all attributes to share the same effect, you can use:

transition: all 0.5s ease-out;
Copy the code

See transition-MDN for an example animation.

2.animationattribute

The animation property is used to specify one or more groups of animations separated by commas.

/ * @ keyframes duration (in this case the linear) | | animation speed delay time 1 s | animation effects (slip) * /
animation: 3s linear 1s slidein;
Copy the code

Three, usetransitionandanimation, build a careful mind

The final effect, the hearts will zoom in and out:

The main ideas are as follows:

  • Create 3 squares with CSS
  • Turn two squares into circles;
  • Then insert 2 circles into the square, fill the background color, you can synthesize a heart.

HTML code display:


      
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" 
        content="Width =device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>JS Bin</title>
</head>
<body>
  <div id=heart>
    <div class="left"></div>
    <div class="right"></div>
    <div class="bottom"></div>
  </div>
</body>
</html>
Copy the code

CSS code display:

#heart {
  margin: 100px;
  display: inline-block;
  position: relative;
  transition: all 1s ease-in-out;
  animation: heart 1s infinite alternate;
}
@keyframes heart {
  0% {
    transform: scale(1.0); 100%} {transform: scale(1.5); }}#heart > .left {
  border: 1px solid red;
  width: 60px;
  height: 60px;
  position: absolute;
  bottom: 50px;
  left: -50px;
  transform: rotate(45deg) translateX(41px);
  border-radius: 50% 0 0 50%;
  background: red;
}
#heart > .right {
  border: 1px solid red;
  width: 60px;
  height: 60px;
  position: absolute;
  bottom: 50px;
  right: -50px;
  transform: rotate(45deg) translateY(41px);
  border-radius: 50% 50% 0 0;
  background: red;
}
#heart > .bottom {
  border: 1px solid red;
  width: 60px;
  height: 60px;
  transform: rotate(45deg);
  background: red;
}

Copy the code

The full version DEMO

Hurry up to learn ~