Contenedor de animación CSS con cuenta regresiva

26 ByBy.inc

Abrir en el editor Publica tu código

Contenedor de animación CSS con cuenta regresiva

Recomendado

29 May 2025

Un código de Mete

7 September 2024

Descubre el mensaje de la carta de amor

14 September 2024

Formulario de inicio de sesión moderno

HTML

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background-color: #181818;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
}
.codigo {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: #272822;
  color: #F8F8F2;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 18px;
  padding: 20px;
  border-radius: 8px;
  white-space: pre-line;
  text-align: left;
  line-height: 1.6;
  max-height: 50%;
  width: 100%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.selector       { color: #F92672; } .property       { color: #66D9EF; } .value-number   { color: #AE81FF; } .value-string   { color: #E6DB74; } .value-color    { color: #A6E22E; } .brace          { color: #F8F8F2; } .comment        { color: #75715E; } .function       { color: #A6E22E; }
.animation-container {
  position: absolute;
  top: 75%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50%;
  overflow: hidden;
  background:transparent;
}

.figure {
  position: relative;
  width: 10vw;
  height: 10vw;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  animation: figureAnimation 10s linear infinite;
}

.figure::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.05);
}

.figure:nth-child(1) { 
    animation-delay: 0s;  
}
.figure:nth-child(2) { 
    animation-delay: 1.5s;  
}
.figure:nth-child(3) { 
    animation-delay: 3s;   
}

.figure:nth-child(4) { 
    animation-delay: 4.5s;  
}

/*
 *
 *  A 'Waiting Room' eterna e claustrofóbica. Cada figura 
 *  representa uma ansiedade existencial suspensa no tempo.
 */

@keyframes figureAnimation {
  0% {
    transform: rotate(0deg) scale(1);
    opacity: 1;
  }
  50% {
    transform: rotate(360deg) scale(1.2);
    opacity: 0.5;
  }
  100% {
    transform: rotate(720deg) scale(1);
    opacity: 1;
  }
}
.countdown {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.5);
  color: rgba(255, 255, 255, 0.8);
  font-size: 140px;
  font-weight: bold;
  animation: countdown 5s linear infinite;
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

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

Recomendado

Un código de Mete

Descubre el mensaje de la carta de amor

Formulario de inicio de sesión moderno

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS