Esempio di animazione di frammenti CSS

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

5 December 2024

Carattere animato VFS Digital Design

6 March 2025

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background-color: #181818;
  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;
}
.fragment{
  position: relative;
    width: 100px;
    height: 100px;
    background: #9D26BF; /* Cor do emoji */

animation: fragmentDrip 4s ease-in-out infinite;
}
@keyframes fragmentDrip
{
  0% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 1;
    filter: blur(0px);

}
  50% {
    transform: translate(20px, -10px) rotate(180deg);
    opacity: 0.5;
    filter: blur(10px);

}
  100% {
    transform: translate(-10px, 20px) rotate(360deg);
    opacity: 0;
     filter: blur(20px);

}
}
/* Animação - as animações devem refletir o efeito da busca incessante por validação e como pode levar à aceleração digital  */

Esempio di animazione di frammenti CSS

Consigliato

Un codice di JEBJEB

Carattere animato VFS Digital Design

Un codice di lebdev

HTML

CSS

JS

Consigliato

Un codice di JEBJEB

Carattere animato VFS Digital Design

Un codice di lebdev

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS