Contenedor de animación de mensajes HTML

1,265 byby.createsite

Abrir en el editor Publica tu código

Contenedor de animación de mensajes HTML

Recomendado

30 September 2025

Animación de carga CSS con ondas y ondulaciones

30 March 2025

Un código de ytr3d3

3 February 2025

Un código de zegarekdawida

HTML

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background-color: #121828; 
  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;
}
.message {
  position: absolute;
  transform-origin: center;
  animation: messageBlink 2s linear infinite;
  width: fit-content;
  font-size: 3em;
  color: #fff;
  text-shadow: 0 0 2px #000;
  opacity: 0;
}
@keyframes messageBlink{
 0% { opacity: 0; }
 50% { opacity: 1; }
 100% { opacity: 0; }
}