Contenitore di animazione CSS con conto alla rovescia

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

19 October 2024

Modulo di accesso HTML animato

13 June 2025

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

Contenitore di animazione CSS con conto alla rovescia

Consigliato

Modulo di accesso HTML animato

Un codice di Metehan

Un codice di alejandrokundrah

HTML

CSS

JS

Consigliato

Modulo di accesso HTML animato

Un codice di Metehan

Un codice di alejandrokundrah

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS