Animazione fantasma CSS

904 byby.createsite

Apri nell'Editor Video Pubblica il Tuo Codice

Consigliato

20 September 2025

Esempio HTML di animazione CSS Sphere

31 October 2025

Effetto testo CSS Glitch

22 November 2025

Effetto passaggio del mouse sul pulsante CSS Liquid Glass

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

Consigliato

Esempio HTML di animazione CSS Sphere

Effetto testo CSS Glitch

Effetto passaggio del mouse sul pulsante CSS Liquid Glass

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS