Enseñarle a usar CSS para hacer una versión Q dinámica del fantasma.

Forma básica

• Cuadrado y rectángulo
• Redondo y ovalado
• Rectángulo redondeado
• línea
• triángulo

Cuadrado y rectángulo

Los cuadrados y rectángulos son las formas más simples, que usan solo ancho y alto.

Código:

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

Forme un cuadrado negro, luego configure los parámetros de fondo

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

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

Redondo y ovalado

border-radius: 50%;

Un círculo negro:

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

Rectángulo redondeado

Solo un rectángulo y establecer propiedades:

border-radius: 50px;

línea

Puede diseñar el elemento <hr />:

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

Esto hará que la línea horizontal sea 10 píxeles más alta.

Para líneas verticales, podemos establecer la clase .vl en:

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

triángulo

Podemos usar la propiedad del borde para hacer un triángulo.

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

Código CSS:

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

código HTML:

<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>

Mostrar resultados:

Miles de aguas y montañas siempre están enamoradas, puedes pedir [tres consecutivas]

Todavía quiero recomendar el grupo de aprendizaje de Python que construí yo mismo : 721195303 , todos los cuales están aprendiendo Python. Si quieres aprender o estás aprendiendo Python, puedes unirte. Todos son parte del desarrollo de software y comparten productos secos de de vez en cuando (solo relacionado con el desarrollo de software de Python), incluida una copia de los últimos materiales avanzados de Python y la enseñanza basada en cero compilada por mí en 2021. ¡Bienvenidos amigos que están en un nivel avanzado e interesados ​​en Python para que se unan!