Animation fantôme CSS

Ouvrir dans l'éditeur Publiez votre code

Recommandé

19 July 2025

Extrait HTML d'animation de texte 3D

27 February 2024

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

Animation fantôme CSS

Recommandé

Extrait HTML d'animation de texte 3D

Bouton HTML CSS

Formulaire OTP HTML CSS

HTML

CSS

JS

Recommandé

Extrait HTML d'animation de texte 3D

Bouton HTML CSS

Formulaire OTP HTML CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS