9

Estou querendo colocar um loader animado em CSS com @keyframes em uma página, mas gostaria de colocar nele um "efeito de arrasto" como se ele desse uma "embaçada" com um rastro de blur seguindo o elemento quando ele se movimenta...

Tipo essa imagem

inserir a descrição da imagem aqui

Mas só consegui chegar até aqui... Alguém tem alguma dica ou sabe uma técnica de como conseguir algo similar a isso?

.box {
  position: absolute;
  left: 50%;
  width: 400px;
  height: 200px;
  margin-left: -200px;
  overflow: hidden;
  background: #333;
}

.bola {
  position: absolute;
  width: 50px;
  height: 50px;
  top: 75px;
  left: 175px;
  background: #999;
  border-radius: 50%;
  -webkit-animation: bolax 2s ease-in-out infinite;
          animation: bolax 2s ease-in-out infinite;
}

@keyframes bolax {
  0%, 100% {
    -webkit-transform: translateX(-150px);
            transform: translateX(-150px);
  }
  50% {
    -webkit-transform: translateX(150px);
            transform: translateX(150px);
  }
}
<div class="box">
  <div class="bola">
  </div>
</div>

1

2 Respostas 2

12

Você pode criar outras bolas para serem o "blur" e alterar apenas o animation-delay e o opacity.

O código abaixo é igual ao seu, apenas adicionei os elementos .blurN e criei as regras para estes elementos específicos.

.box {
  position: absolute;
  left: 50%;
  width: 400px;
  height: 200px;
  margin-left: -200px;
  overflow: hidden;
  background: #333;
}

.bola {
  position: absolute;
  width: 50px;
  height: 50px;
  top: 75px;
  left: 175px;
  background: #999;
  border-radius: 50%;
  -webkit-animation: bolax 2s ease-in-out infinite;
          animation: bolax 2s ease-in-out infinite;
}

.blur1 {
  animation-delay: 20ms;
  opacity: 0.5;
}

.blur2 {
  animation-delay: 40ms;
  opacity: 0.4;
}

.blur3 {
  animation-delay: 60ms;
  opacity: 0.3;
}

.blur4 {
  animation-delay: 80ms;
  opacity: 0.2;
}


@keyframes bolax {
  0%, 100% {
    -webkit-transform: translateX(-150px);
            transform: translateX(-150px);
  }
  50% {
    -webkit-transform: translateX(150px);
            transform: translateX(150px);
  }
}
<div class="box">
  <div class="bola"></div>
  <div class="bola blur1"></div>
  <div class="bola blur2"></div>
  <div class="bola blur3"></div>
  <div class="bola blur4"></div>
</div>

2
  • Cara bem interessante a técnica, visualmente é quase imperceptível que tem mais de um elemento ali, muito bom tb!
    – hugocsl
    26/10/2018 às 13:45
  • 1
    Valeu, se tu for analisar o teu GIF não existe desfoque mas sim repetições que vão diminuindo a opacidade. Aí é só jogar com os números de opacidade e delay para chegar num ponto ideial. :D 26/10/2018 às 13:46
11

A maneira mais "rápida" de adaptar seu código é acrescentando uma "sombra ao contrário".

As cores são um degradê entre a frente e o fundo:

27% {box-shadow:-10px 0 0 #999,-20px 0 0 #777,-30px 0 0 #666,-40px 0 0 #555,-50px 0 0 #444}
77% {box-shadow:10px 0 0 #999,20px 0 0 #777,30px 0 0 #666,40px 0 0 #555,50px 0 0 #444}

No caso, eu pré-calculei as cores indo de #999 a #444, mas se quiser fazer independente do fundo, troque por RGBA( cor do objeto, transparencia ), fazendo a transparência cada vez maior a cada sombra.

Aplicando ao seu código:

.box {
  position: absolute;
  left: 50%;
  width: 400px;
  height: 200px;
  margin-left: -200px;
  overflow: hidden;
  background: #333;
}

.bola {
  position: absolute;
  width: 50px;
  height: 50px;
  top: 75px;
  left: 175px;
  background: #ccc;
  border-radius: 50%;
  -webkit-animation: bolax 2s ease-in-out infinite;
          animation: bolax 2s ease-in-out infinite;
}

@keyframes bolax {
  0%, 100% {
    -webkit-transform: translateX(-150px);
            transform: translateX(-150px);
  }
  27% {box-shadow:
    -10px 0 0 #999,
    -20px 0 0 #777,
    -30px 0 0 #666,
    -40px 0 0 #555,
    -50px 0 0 #444;
  }
  50% {
    -webkit-transform: translateX(150px);
            transform: translateX(150px);
    }
  77% {box-shadow:
    10px 0 0 #999,
    20px 0 0 #777,
    30px 0 0 #666,
    40px 0 0 #555,
    50px 0 0 #444;
  }  }
}
<div class="box">
  <div class="bola">
  </div>
</div>

2
  • 1
    Totalmente excelente! Obrigado pela contribuição!
    – hugocsl
    26/10/2018 às 13:45
  • 1
    Sensacional! Muito bom o exemplo 26/10/2018 às 14:15

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .