ilusao de café sendo derramado em uma xícara☕ 🍫

Isabelle de Souza — Mon, 24 Apr 2023 20:35:15 +0000

Te ensino como fazer o café de todos os dias. ☕ 🍫 #css

Passo 1: Um contenedor para toda animacao.

Html

<div class="container-animation">
  <div class="container-xicara">
    <div class="chorro"></div>
    <div class="coffee-cont">
      <div class="coffee-cup"></div>
      <div class="coffee-hand"></div>
    </div>
  </div>
</div>

CSS

.container-animation {
  width:40vw;
  height: 100vh;
  margin: auto;
  position: relative;
}

Paso 2: Derramando o cafe 💧

animation: nome: "cafe-derramando" e tempo de 4 segundos.
animation-fill-mode: forwards, a animação manterá o último estado da animação depois que ela terminar, ou seja, o café derramado permanecerá na xícara após a animação ser concluída.
animation-timing-function: devagar e acelera à medida que a animação avança.
animation-iteration-count: quantas vezes a animação será executada.
CSS

.cafe-derramando {
  width: 10%;
  border-radius: 20%;
  position: absolute;
  top: 12%;
  left: 50%;
  transform: translatex(-50%);
  background: #84523f;
  z-index: 1;
  animation: cafe-derramando 4s;
  animation-fill-mode:forwards;
  animation-timing-function: ease-in;
  animation-iteration-count:2;
}

Paso 3: A xicara ☕

Para dar forma à xícara, utilizamos a propriedade "border-radius", que permite definir os cantos do elemento. Já para dar profundidade usamos a propriedade "box-shadow".

.coffee-cup {
  position: relative;
  width: 280px;
  height: 190px;
  margin: 0 auto;
  background: #fff;
  );
  background-image: url("https://iili.io/H8C9muV.png");
  border-radius: 22% 22% 100px 100px;
  top: 50%;
 box-shadow: -30px 61px 42px -40px rgba(0,0,0,0.1);
}

Paso 4 Café

Cria uma forma oval.

"".coffee-cup::before {
  content: " ";
  display: block;
  height: 35px;
  width: 240px;
  position: absolute;
  border-radius: 50%;
  background: rgb(171, 104, 80);
  background: linear-gradient(
    3deg,
    rgba(171, 104, 80, 0.9836309523809523) 38%,
    rgba(129, 80, 63, 1) 60%,
    rgba(136, 75, 52, 1) 86%
  );
  top: 10%;
  left: 50%;
  z-index: 9;
  transform-origin: 50%;
  animation: fill 3s;
  animation-fill-mode: both;
  animation-delay: 1.2s; /*solo pasa una vez*/
  transform: translate(-50%, 60%) scale(0);
  animation-iteration-count: infinite;
  animation-iteration-count: 2;
  z-index: 2;
}""

Paso 5 Alça💪

"".coffee-cup::after {
  content: "";
  display: block;
  height: 50px;
  width: 275px;
  position: absolute;
  border-radius: 50%;
  background: rgb(180, 139, 127);
  background: linear-gradient(
    90deg,
    rgba(180, 139, 127, 1) 9%,
    rgba(224, 162, 144, 0.9668242296918768) 52%,
    rgba(255, 213, 201, 1) 76%
  );
  top: 9%;
  left: 50%;
  border: 4px solid #c74c29;
  transform: translate(-50%, -40%);
}""

Paso 6 : Finalmente as animações 🤹‍♀️

A ilusão é criada modificando a altura.

""@keyframes cafe-derramando {
  0% {
    height: 0; /*  inicio antes que se execute;*/
  }
  10% {
    height: 41%;
  }
  75% {
    height: 41%;
  }
  100% {
    height: 0%;
  }
}

A parte complicada é fazer com que o café se mova para cima 🔝enquanto aumenta de tamanho. Para conseguir esse efeito, é possível utilizar a propriedade translateY com um valor negativo em conjunto com scale. Isso fará com que o elemento seja primeiro movido para cima aumentado de tamanho gradualmente.☕☕

@keyframes fill {
  0% {
    transform: translate(-50%, -6%) scale(1, 0);
  }
  100% {
    transform: translate(-50%, -45%) scale(1);
  }
}""

Alguns links que podem ajudar

Transform origin;
Cafe;
Color Picker;
Como centrar qualquer coisa;