Exemplo de animação de fragmento CSS

56 ByBy.inc

Abrir no Editor Publique Seu Código

Recomendado

26 March 2025

Landing page para um negócio de bicicletas

13 June 2025

Interface de usuário do aplicativo despertador e cronômetro

7 November 2024

Efeito de animação de texto flutuante

HTML

CSS

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

Recomendado

Landing page para um negócio de bicicletas

Interface de usuário do aplicativo despertador e cronômetro

Efeito de animação de texto flutuante

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS