Animação fantasma CSS

19 ByBy.inc

Abrir no Editor Publique Seu Código

Recomendado

12 December 2024

Controle deslizante de imagem para Blogspot CSS3

15 May 2025

Modelo de site de comércio eletrônico HTML CSS

4 July 2025

Modelo HTML do Banco ORABANC: Portais do Usuário e CSS

HTML

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background-color: #253446;
  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%);
  width: 100%;
  height: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.ghost {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  animation: fade-in-out 5s linear infinite;
}
@keyframes fade-in-out {
  from { opacity: 0; transform: scale(0.5); }
  to { opacity: 1; transform: scale(1); }
}

Recomendado

Controle deslizante de imagem para Blogspot CSS3

Modelo de site de comércio eletrônico HTML CSS

Modelo HTML do Banco ORABANC: Portais do Usuário e CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS