This case is the result of learning in class. This article is only a summary record of learning. Welcome to study and exchange.

A, display

Second, the conception of

  1. Technology used: HTML + CSS
  2. Div box model
  3. Position Locates the position of a fixed element
  4. Pseudoclass manufacturing elements (blush part)

Three, implementation,

  1. HTML part three layer structure (Container + Ball *2)
<div class="container">
  
    <div class="ball" id="l-ball">
      <div class="face" id="face-l">
        <div class="eye eye-l"></div>
        <div class="eye eye-r"></div>
        <div class="mouth"></div>
      </div>      
    </div>
  
    <div class="ball" id="r-ball"><! A line break counts as a pixel, and even if it adds up to just enough it will exceed 232+1-->
      <div class="face face-r">
        <div class="eye eye-l eye-r-p"></div>
        <div class="eye eye-r eye-r-p"></div>
        <div class="mouth mouth-r"></div>
        <div class="kiss-m">
          <div class="kiss"></div>
          <div class="kiss"></div>
        </div>
      </div>
    </div>
  
</div>
Copy the code
  1. CSS section (positon+ Transform +::before&after+animation+opacity)
body {
  margin: 0;
  padding: 0;
  background-color: #78e08f;
}
.container {
  width: 232px;
  height: 150px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 0;/ * * /
}
.ball {
  width: 100px;
  height: 100px;
  border-radius: 50%; /* bdrs */
  border: 8px solid # 000;
  background-color: #fff;
  position: relative;
  display: inline-block;
}
.face {
  width: 70px;
  height: 30px;
  position: absolute;
  right: 0;
  top: 30px;
}
.face::before {
  content: "";
  width: 18px;
  height: 8px;
  border-radius: 50%;
  background-color: #badc58;
  position: absolute;/* Only block-level elements can be displayed, otherwise use positioning */
  right: -8px;
  top: 20px;
}
.face::after {
  content: "";
  width: 18px;
  height: 8px;
  border-radius: 50%;
  background-color: #badc58;
  position: absolute;
  left: -5px;
  top: 20px;
}
.eye {
  width: 15px;
  height: 14px;
  border-radius: 50%;
  border-bottom: 5px solid # 000;
  position: absolute;
}
.eye-l {
  left: 10px;
}
.eye-r {
  right: 5px;
}
.mouth {
  width: 30px;
  height: 14px;
  border-radius: 50%;
  border-bottom: 5px solid # 000;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  margin: 0 auto;/* L0r0 can be horizontally centered in absolute positioning */
  transform: translate(3px);
}
#l-ball {
  animation: close 4s ease infinite;
  z-index: 2;
}
@keyframes close {
  0% { transform: translate(0); }
  20% { transform: translate(20px); }
  35% { transform: translate(20px); }
  55% { transform: translate(0); }
  100% { transform: translate(0); }}#face-l {
  animation: face 4s ease infinite;
}
@keyframes face {
  0% { transform: translate(0) rotate(0); }
  10% { transform: translate(0) rotate(0); }
  20% { transform: translate(5px) rotateX(-2deg); }
  28% { transform: translate(0) rotate(0); }
  35% { transform: translate(5px) rotateX(-2deg); }
  50% { transform: translate(0) rotate(0); }
  100% { transform: translate(0) rotate(0); }}.face-r {  / * reset face * /
  /* If you write width 200 here, it works here, because the code is executed from the top down, 200 will cover face's 100 */
  left: 0;
  top: 37px;
}
.face-r::before {  / * reset face * /
  width: 10px;
  height: 10px;
  right: -4px;
}
.face-r::after {  / * reset face * /
  width: 10px;
  height: 10px;
  left: 5px;
}
.eye-r-p {
  border-top: 5px solid # 000;
  border-bottom: none;
}
.kiss-m {
  position: absolute;
  left: 20px;
  top: 22px;
  opacity: 0;
  animation: kiss-m 4s ease infinite;
}
.kiss {
  width: 13px;
  height: 10px;
  border-radius: 50%;
  border-left: 5px solid # 000;
}
#r-ball {
  animation: kiss 4s ease infinite;
}
@keyframes kiss {
  40% { transform: translate(0); }
  50% { transform: translate(30px) rotateZ(20deg); }
  60% { transform: translate(-33px); }
  67% { transform: translate(-33px); }
  77% { transform: translate(0); }}.mouth-r {
  animation: mouth-m 4s ease infinite;
}
@keyframes mouth-m {
  0% { opacity: 1; }
  54.9% { opacity: 1; }
  55% { opacity: 0; }
  66% { opacity: 0; }
  66.1% { opacity: 1; }}@keyframes kiss-m {
  0% { opacity: 0; }
  55% { opacity: 0; }
  55.1% { opacity: 1; }
  66% { opacity: 1; }
  66.1% { opacity: 0; }}Copy the code

Four,

  1. Clear the DOM default style
```css body { margin: 0; padding: 0; } ' 'body has a margin by default. The default style needs to be cleared for integrityCopy the code

  1. The way elements are centered

    • The box is centered vertically

      .container {
  border: 1px solid # 000;
  width: 232px;/* Given width and height */
  height: 150px;
    
  position: absolute;/* Positioning distance upper left 50% */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);/* The translateX and Y axes are adjusted to */
}
Copy the code

    • The elements inside the box are vertically centered

      .mouth {
  width: 30px;/* Given width and height */
  height: 14px;
    
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;/* Allocate the natural distance to center */
  transform: translate(3px);
}
Copy the code

    • The text centered

      Let the height = line – height; text-align:center;

    • Flex layout

  2. A way to juxtapose block-level elements

    • display: inline-block;
    • float

  3. Pseudo-classes can only be displayed in the DOM if they are block-level elements, otherwise use positioning

  4. Implement the same element common style encapsulation, the addition of personality style

    • Resetting the face style above ↑ is done

      • Adding more than one class name to the same element (the CSS for the later class is written below the previous class) can be overridden as the code parses from top to bottom for different effects

  5. Hidden elements

    • opacity

    • display: none;

  6. Understanding of rotate in Transform

    • coordinate

      Assuming that the X and Y axes form a plane, the Z axis looks like this:

      CSDN rotate() :

      Rotate () and rotateZ() adopt the principle of nearest to the target Angle:

      • If it is less than 180°, it is clockwise normally, but if it is greater than 180°, attention should be paid to: for example, if the value is set to 200deg, it will turn 160 degrees counterclockwise to complete the work;
      • Let 180° turn counterclockwise and -180° turn clockwise;
      • Let the multiples of 360 degrees not rotate