At the beginning

CSS foundation I believe you are also very familiar with, today we will use it to achieve a jingle cat ~

This article is participating in [Cat essay Activity]

Possible CSS

Important: CSS variables

border

  • Border-width: specifies the width of the border
  • Border-style: specifies the style of the border
  • Border-color: specifies the color of the border

position

  • Absolute: Fixed position
  • Fixed: indicates the absolute location
  • Relative: relative to an element
  • Static: There is no location
  • Inherit: Inherits the position property of the parent element

box-shadow

  • H-shadow: Position of horizontal shadow
  • V-shadow: Position of the vertical shadow
  • I don’t have a blur
  • Spread: Shadow size
  • Color: The color of the shadow
  • Inset: Changes the outer shadow to the inner shadow

Begin to implement

Page Layout (HTML) :

<body>
  <div class="page">
    <div class="doraemon">
      <div class="head">
        <div class="eyes">
          <div class="eye left">
            <div class="black bleft"></div>
          </div>
          <div class="eye right">
            <div class="black bright"></div>
          </div>
        </div>
        <div class="face">
          <div class="white"></div>
          <div class="nose">
            <div class="light"></div>
          </div>
          <div class="nose1"></div>
          <div class="mouth"></div>
        </div>
      </div>
    </div>
  </div>
</body>
Copy the code

Page Style (CSS) :

As for THE CSS part, we will implement it in the way of CSS variables. If you are not familiar with it, you can read my previous article about CSS custom attributes (CSS variables).

:root { --doraemon-width: 500px; --doraemon-height: 450px; } .page { width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; } .doraemon { position: relative; } .doraemon .head { position: relative; width: var(--doraemon-width); height: var(--doraemon-height); border-radius: 50% 50% 25% 25% / 55% 55% 45% 45%; background: #008ee3; border: 2px solid #555; Box-shadow: -5px 10px 15px rgba(0, 0, 0, 0.45); } /* face */.doraemon. Face {position: relative; z-index: 2; } /* white */.doraemon. Face. White {width: calc(var(--doraemon-width) -90px); height: calc(var(--doraemon-height) - 90px); background: snow; border-radius: calc(var(--doraemon-width) / 2 + 20px); position: absolute; top: 75px; left: 45px; background: -webkit-radial-gradient(right top, #fff 75%, #eee 80%, #999 90%, #444); } /* nose */.doraemon. Face. nose {width: calc(--doraemon-width) / 12); height: calc(var(--doraemon-width) / 12); border-radius: calc(var(--doraemon-width) / 12); background: #c93300; border: 2px solid #000; position: absolute; top: calc(var(--doraemon-height) / 2 - calc(var(--doraemon-width) / 12)); Left: calc (var (-- doraemon - width) / 2.4); z-index: 3; } .doraemon .face .nose .light { width: 10px; height: 10px; border-radius: 5px; box-shadow: 19px 8px 5px #fff; } .doraemon .face .nose1 { width: 3px; height: calc(var(--doraemon-height) / 3); background: #333; position: absolute; top: calc(var(--doraemon-height) / 2); Left: calc(var(--doraemon-width) / 2.4 + calc(--doraemon-width) / 24)); z-index: 3; } .doraemon .face .mouth { width: calc(var(--doraemon-width) / 2); height: var(--doraemon-height); border-bottom: 3px solid #333; border-radius: 120px; position: absolute; top: -40px; left: 120px; } .doraemon .eyes .eye { z-index: 3; width: calc(var(--doraemon-width) / 5); height: calc(var(--doraemon-height) / 3); background: #fff; border: 2px solid #000; border-radius: 35px 35px; position: absolute; top: 50px; } .doraemon .eyes .left { left: Calc (var(--doraemon-width) / 2.4-calc (var(--doraemon-width) / 5) + calc(--doraemon-width) / 24)); }.doraemon. Eyes. Right {left: calc(var(--doraemon-width) / 2.4 + calc(--doraemon-width) / 24)); } /* eyeball */.doraemon. Eyes.black {width: 14px; height: 14px; background: #000; border-radius: 7px; position: absolute; top: 40px; } .doraemon .eyes .eye .bleft { left: calc(100% / 5); } .doraemon .eyes .eye .bright { left: calc(100% / 7); }Copy the code

Final rendering