Contêiner de animação de mensagem HTML

128 ByBy.inc

Abrir no Editor Publique Seu Código

Recomendado

10 July 2025

Exemplo de tela de carregamento animada em HTML com CSS

7 August 2025

Emoji SVG de olhos esbugalhados com rastreamento de mouse

3 July 2025

Modelo HTML CSS para site de academia de ginástica

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

Recomendado

Exemplo de tela de carregamento animada em HTML com CSS

Emoji SVG de olhos esbugalhados com rastreamento de mouse

Modelo HTML CSS para site de academia de ginástica

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS