CSS Fragment Animation Example

Open In Editor Publish Your Code

* {
  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  */

CSS Fragment Animation Example

Recommended

Matrix Login Register Form HTML CSS

CSS Card Glow

Order Button Animation

HTML

CSS

JS

Recommended

Matrix Login Register Form HTML CSS

CSS Card Glow

Order Button Animation

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS