Ejemplo de animación de fragmento CSS

Abrir en el editor Publica tu código

Recomendado

2 June 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  */

Ejemplo de animación de fragmento CSS

Recomendado

Un código de abfomap

Un código de hamzanramzan034

Entrada de búsqueda

HTML

CSS

JS

Recomendado

Un código de abfomap

Un código de hamzanramzan034

Entrada de búsqueda

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS