Teach you how to use CSS to make a dynamic Q version of the ghost

Basic shape

• Square and rectangle
• Round and oval
• Rounded Rectangle
• line
• triangle

Square and rectangle

Squares and rectangles are the simplest shapes, using only width and height.

Code:

.square {
  width: 100px;
  height: 100px;
  background-color: black;
}

Form a black square, then set the background parameters

.rect-wide {
  width: 500px;
  height: 100px;
  background-color: red;
}

.rect-tall {
  width: 100px;
  height: 500px;
  background-color: green;
}

Round and oval

border-radius: 50%;

A black circle:

.circle {
  width: 100px;
  height: 100px;
  background-color: black;
  border-radius: 50%;
}

Oval:

.oval-wide {
  width: 200px;
  height: 100px;
  background-color: red;
  border-radius: 50%;
}

.oval-tall {
  width: 100px;
  height: 200px;
  background-color: green;
  border-radius: 50%;
}

Rounded Rectangle

Just a rectangle and set properties:

border-radius: 50px;

line

You can style the <hr /> element:

hr {
  height: 10px;
  background-color: black;
}

This will make the horizontal line 10 pixels higher

For vertical lines, we can set the .vl class to:

.vl {
  width: 1px;
  height: 10px; /*调整线条高度*/
  border-right: 1px solid black; /*边框线条属性*/
}

triangle

We can use the border property to make a triangle

.triangle {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid black;
}

CSS code:

body {
  margin: 0;
  padding: 0;
  background-color: #2c3a47;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ghost {
  width: 140px;
  height: 160px;
  background-color: #f2f2f2;
  border-radius: 70px 70px 0 0;
  position: relative;
  cursor: pointer;
  animation: floating 2s infinite ease-in-out;
  box-shadow: 20px 20px 50px 10px #121212;
}

@keyframes floating {
  50% {
    transform: translateY(-50px);
  }
}

.face {
  width: 100px;
  position: absolute;
  top: 60px;
  left: calc(50% - 50px);
}

.eyes {
  height: 24px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 14px;
}

.eyes span {
  width: 24px;
  height: 24px;
  background-color: #2c3a47;
  border-radius: 50%;
  transition: 0.3s linear;
}

.ghost:hover .eyes span {
  height: 26px;
}

.mouth {
  width: 40px;
  height: 20px;
  background-color: #2c3a47;
  margin: auto;
  border-radius: 0 0 20px 20px;
  transition: 0.3s linear;
}

.ghost:hover .mouth {
  height: 30px;
}

.hands {
  width: 180px;
  position: absolute;
  left: -20px;
  top: 80px;
  display: flex;
  justify-content: space-between;
}

.hands span {
  width: 20px;
  height: 30px;
  background-color: #f2f2f2;
}

.hands span:first-child {
  border-radius: 20px 0 0 20px;
}

.hands span:last-child {
  border-radius: 0 20px 20px 0;
}

.feet {
  position: absolute;
  width: 100%;
  bottom: -20px;
  display: flex;
}

.feet span {
  flex: 1;
  height: 20px;
  background-color: #f2f2f2;
  border-radius: 0 0 20px 20px;
}

.feet span:first-child {
  border-radius: 0 0 20px 12px;
}

.feet span:last-child {
  border-radius: 0 0 12px 20px;
}

html code:

<div class="ghost">
  <div class="face">
    <div class="eyes"><span></span><span></span></div>
    <div class="mouth"></div>
  </div>

  <div class="hands"><span></span><span></span></div>

  <div class="feet">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>

Show results:

Thousands of waters and mountains are always in love, can you order [three consecutive]

I still want to recommend the Python learning group I built by myself : 721195303 , all of whom are learning Python. If you want to learn or are learning Python, you are welcome to join. Everyone is a software development party and share dry goods from time to time (only Python software development related), including a copy of the latest Python advanced materials and zero-based teaching compiled by myself in 2021. Welcome friends who are in advanced and interested in Python to join!