1000 Followers en tiktok - Animación CSS

Introducción:

En testa animación encontraremos 3 pequeñas animaciones, las cuales son:

Movimiento infinito de una imagen svg en vertical.
Imagen svg de globos que se vuelven invisibles y visibles de forma infinita.
Parpadeo infinito de unos puntos (círculos), que cambian de color.

Nota: Para el alineamiento de los elementos usamos Grid.

No podemos hacer una animación sin tener primero la estructura o esqueleto en HTML.

Pueden ver el código funcionando o corriendo aquí.

Programando el código de la parte HTML

Como son varios círculos los que necesitamos, para que funcionen «como luces que parpadean», generamos 10 filas y 10 columnas de círculos y también insertamos las imágenes vectoriales.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8"/>
  <title>1000Followers</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
 <div class="content">
  <div class="container-led">
  <!-- row 1 - -->
  <div class="circle">
  </div>
  <div class="circle new-circle">
  </div>
  <div class="circle">
  </div>
  <div class="circle new-circle">
  </div>
  <div class="circle">
  </div>
  <div class="circle new-circle">
  </div>
  <div class="circle">
  </div>
  <div class="circle new-circle">
  </div>
  <div class="circle">
  </div>
  <div class="circle new-circle">
  </div>
  <!-- row 2 - -->
  <div class="circle new-circle">
  </div>
  <div class="circle">
  </div>
  <div class="circle new-circle">
  </div>
  <div class="circle">
  </div>
  <div class="circle new-circle">
  </div>
  <div class="circle">
  </div>
  <div class="circle new-circle">
  </div>
  <div class="circle">
  </div>
  <div class="circle new-circle">
  </div>
  <div class="circle">
  </div>
  <!-- row 1- -->
  <div class="circle">
  </div>
  <div class="circle new-circle">
  </div>
  <div class="circle">
  </div>
  <div class="circle new-circle">
  </div>
  <div class="circle">
  </div>
  <div class="circle new-circle">
  </div>
  <div class="circle">
  </div>
  <div class="circle new-circle">
  </div>
  <div class="circle">
  </div>
  <div class="circle new-circle">
  </div>
  <!-- row 2 - -->
  <div class="circle new-circle">
  </div>
  <div class="circle">
  </div>
  <div class="circle new-circle">
  </div>
  <div class="circle">
  </div>
  <div class="circle new-circle">
  </div>
  <div class="circle">
  </div>
  <div class="circle new-circle">
  </div>
  <div class="circle">
  </div>
  <div class="circle new-circle">
  </div>
  <div class="circle">
  </div>
  <!-- row 1- -->
  <div class="circle">
  </div>
  <div class="circle new-circle">
  </div>
  <div class="circle">
  </div>
  <div class="circle new-circle">
  </div>
  <div class="circle">
  </div>
  <div class="circle new-circle">
  </div>
  <div class="circle">
  </div>
  <div class="circle new-circle">
  </div>
  <div class="circle">
  </div>
  <div class="circle new-circle">
  </div>
  <!-- row 2 - -->
  <div class="circle new-circle">
  </div>
  <div class="circle"> 
  </div>
  <div class="circle new-circle">
  </div>
  <div class="circle">
  </div>
  <div class="circle new-circle">
  </div>
  <div class="circle">
  </div>
  <div class="circle new-circle">
  </div>
  <div class="circle">
  </div>
  <div class="circle new-circle">
  </div>
  <div class="circle">
  </div>
  <!-- row 1- -->
  <div class="circle">
  </div>
  <div class="circle new-circle">
  </div>
  <div class="circle">
  </div>
  <div class="circle new-circle">
  </div>
  <div class="circle">
  </div>
  <div class="circle new-circle">
  </div>
  <div class="circle">
  </div>
  <div class="circle new-circle">
  </div>
  <div class="circle">
  </div>
  <div class="circle new-circle">
  </div>
  <!-- row 2 - -->
  <div class="circle new-circle">
  </div>
  <div class="circle">
  </div>
  <div class="circle new-circle">
  </div>
  <div class="circle">
  </div>
  <div class="circle new-circle">
  </div>
  <div class="circle">
  </div>
  <div class="circle new-circle">
  </div>
  <div class="circle">
  </div>
  <div class="circle new-circle">
  </div>
  <div class="circle">
  </div>
  <!-- row 1- -->
  <div class="circle">
  </div>
  <div class="circle new-circle">
  </div>
  <div class="circle">
  </div>
  <div class="circle new-circle">
  </div>
  <div class="circle">
  </div>
  <div class="circle new-circle">
  </div>
  <div class="circle">
  </div>
  <div class="circle new-circle">
  </div>
  <div class="circle">
  </div>
  <div class="circle new-circle">
  </div>
  <!-- row 2 - -->
  <div class="circle new-circle">
  </div>
  <div class="circle">
  </div>
  <div class="circle new-circle">
  </div>
  <div class="circle">
  </div>
  <div class="circle new-circle">
  </div>
  <div class="circle">
  </div>
  <div class="circle new-circle">
  </div>
  <div class="circle">
  </div>
  <div class="circle new-circle">
  </div>
  <div class="circle">
 </div>
</div>
<div class="container-element font-style">
  <div class="container-title font-style">
   Primera vez que tengo tantos followers
  </div>
  <div class="coantainer-celebration">
   <div class="triangle-two">
   </div>
   <div class="rectangle">
     <span>1000 Followers</span>
     </div>
     <div class="triangle-one">
     </div>
   </div>
   <div class="content-images">
     <div class="globes1">
       <img class="img1" src="img/globos_left.svg" alt="globes SVG" />
     </div>
     <div class="content-chibi">
       <img class="img2" src="img/Ney.svg" alt="Chibi Ney SVG" />
     </div>
     <div class="globes2">
        <img class="img3" src="img/globo_right.svg" alt="globes SVG" />
     </div>
    </div>
   </div>
  </div>
 </body>
</html>

Programando el código del lado parte CSS

En esta parte no esta la animación, eso lo veremos después.

@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Acme&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Carter+One&display=swap');
body {
  background: linear-gradient(90deg, rgb(2, 0, 36) 0%, rgb(44, 9, 121) 35%, rgb(32, 2, 68) 100%);
  margin: 0;
}
.font-style {
  font-family: 'Archivo Black', sans-serif;
  font-family: 'Acme', sans-serif;
  font-family: 'Press Start 2P', cursive;
  font-family: 'Carter One', cursive;
}
.content {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  height: 100vh;
  width: 100vw;
}
.container-element {
  display: grid;
  grid-column: 1/2;
  grid-row: 1/2;
  grid-gap: 15px;
  justify-content: center;
  align-content: center;
  align-items: center;
  justify-items: center;
}
.coantainer-celebration {
  display: grid;
  justify-content: unset;
  grid-template-columns: auto 1fr auto;
}
.rectangle {
  background:#ff50a7;
  text-align: center;
  color: white;
  font-size: 4vw;
  line-height: 4vw;
  display: grid;
  align-content: center;
}
.triangle-one {
  width: 0;
  height: 0;
  border-right: 6vw solid #f0ad4e00;
  border-top: 40px solid #ff50a7;
  border-bottom: 40px solid #ff50a7;
}
.triangle-two {
  width: 0;
  height: 0;
  border-left: 6vw solid #f0ad4e00;
  border-top: 40px solid #ff50a7;
  border-bottom: 40px solid #ff50a7;
}
.container-title {
  color:#ffb74a;
  font-size: 25px;
  text-align: center;
}
.container-led {
  display: grid;
  grid-column: 1/2;
  grid-row: 1/2;
  grid-template-columns: repeat(10,1fr);
  grid-template-rows: repeat(10,1fr);
  justify-content: center;
  align-content: center;
  align-items: center;
  justify-items: center;
}
.circle {
  width: 5px;
  height: 5px;
  background: white;
  border-radius: 2px;
 animation: led-one 5s infinite;
}
.new-circle {
  background: #1e1e1e;
  animation: led-two 2s infinite;
}
.content-images{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
}
.content-chibi{
  display: grid;
  grid-column: 2/3;
  grid-row: 1/2;
}
.globes1{
  display: grid;
  grid-column: 1/2;
  grid-row: 1/2;
}
.globes2{
  display: grid;
  grid-column: 3/4;
  grid-row: 1/2;
}
.globes1 .img1 {
  width: 25vw;
}
.content-chibi .img2 {
  width: 25vw;
}
.globes2 .img3 {
  width: 25vw;
}
.img1{
  animation: transparent 5s infinite;
  opacity: 0;
}
.img3{
  animation: transparent 5s infinite;
  opacity: 0;
}
.content-images .content-chibi .img2{
  animation: vertical 5s infinite;
  transform: translateY(100px);
}

CSS la animación

1. Globos

Lo primero es la animación de los globos, donde simplemente jugamos con la transparencia.

@keyframes transparent {
    0%{
      opacity: 0;
    }
    50%{
      opacity: 1;
    }
    100%{
      opacity: 0;
    }
}

2.Chibi girl

Para esta imagen svg simulamos un salto, para ello movemos la imagen en vertical en 3 tiempos 1 el punto de donde parte, 2 la altura máxima (si la altura máxima es «0») ya que tuvimos que descender la imagen de su posición inicial para generar el salto, 3 volver al punto inicial.

@keyframes vertical{
    0% {
        transform: translateY(100px);
    }
    50% {
        transform: translateY(0px);
    }
    100% {
        transform: translateY(100px);
    }
}

3. Círculos parpadeantes

En este caso hay 2 animaciones, la idea era que los círculos cambiaran de color de forma intercalada, como las luces de los arboles de navidad.

@keyframes led-one {
    10%   {
          background-color: #ff9a00;
    }
    25% {
        background-color: #ff1bb1;
    }
    50% {
        background-color:  #1e1e1e;
    }
}
@keyframes led-two {

    10%   {
          background-color: #05b020;
    }
    25% {
        background-color: #ff9a00;
    }
    50% {
        background-color:  white;
        width: 7px;
        height: 7px;
        border-radius: 3.5px;
    }
}

Y eso es todo, tuve problemas al momento de pasar el código al editor de la web, no se si me explico bien, en todo caso les dejo el enlace de mi github.

Extra: Agradecimientos especiales a Kj y a todos mis amigos de discord Chametzz, ImKike19, RuiLlexy, goku86 gamer, santu, Emilio.

1000 Followers en tiktok – Animación CSS

Publicado por Ney en 26 septiembre, 202226 septiembre, 2022

Relacionado

CSS

Selector :has() – CSS

CSS

Propiedad outline – CSS

CSS

first-of-type | css