Contenedor de animación CSS con cuenta regresiva

1,371 byby.createsite

Remix Abrir en el editor Publica tu código

Contenedor de animación CSS con cuenta regresiva

Recomendado

18 February 2024

Generador de Imágenes

19 May 2025

Proyecto de sombreado WebGL

6 January 2026

guión de geometría

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