3

Estou quebrando a cabeça com uma coisa simples, geralmente eu resolvo esses problemas olhando no google, mas hoje não tive essa sorte.

E o seguinte, eu quero criar um fundo com a class "animation linear infinite", porem quero colocar uma imagem PNG por cima com o mesmo feito, movendo a imagem junto com a cor do fundo.

Não consegui de nenhuma forma sobrepor a imagem por cima da cor de fundo.

Obs.: Já tentei usar z-index mas não obtive sucesso.

.imagem {
    width: 500px;
    height: 500px;
    background: url("https://i.imgur.com/XhYIPUs.png") repeat left top;
    -webkit-animation: 40s linear infinite LoadingBarProgress, .5s ease-out LoadingBarEnter;
    animation: 40s linear infinite LoadingBarProgress, .5s ease-out LoadingBarEnter;
    -webkit-transform-origin: left;
    transform-origin: left;
}
.cor-de-fundo {
    width: 500px;
    height: 500px;
    background: #a8a8a8 linear-gradient(to right, #a8a8a8, #3d3d3d, #ffafa9, #3d3d3d, #a8a8a8);
    background-size: 500%;
    -webkit-animation: 40s linear infinite LoadingBarProgress, .5s ease-out LoadingBarEnter;
    animation: 40s linear infinite LoadingBarProgress, .5s ease-out LoadingBarEnter;
    -webkit-transform-origin: left;
    transform-origin: left;
}

@-webkit-keyframes LoadingBarProgress {
    0% {
        background-position: 0% 0
    }
    to {
        background-position: 125% 0
    }
}

@keyframes LoadingBarProgress {
    0% {
        background-position: 0% 0
    }
    to {
        background-position: 125% 0
    }
}

@-webkit-keyframes LoadingBarEnter {
    0% {
        -webkit-transform: scaleX(0);
        transform: scaleX(0)
    }
    to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
}

@keyframes LoadingBarEnter {
    0% {
        -webkit-transform: scaleX(0);
        transform: scaleX(0)
    }
    to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="imagem cor-de-fundo"></div>
</body>
</html>

2
  • Não seria o caso de você utilizar outra <div>? 25/08/2018 às 23:46
  • funcionaria, no entanto teria que utilizar position, e afetaria a pagina por completo :(
    – Vitor Hugo
    26/08/2018 às 2:20

2 Respostas 2

2

Na verdade como vc falou que queria mexer pouco no template é possível sim fazer apenas como uma div

Vc consegue o efeito usando apenas uma div e usando a pseudo-class ::after na div Veja o exemplo para entender melhor, repare que é apenas 1 div.

@-webkit-keyframes beta-gradient {
    0%{background-position:0 0}
    100%{background-position:100% 0}
}
@-moz-keyframes beta-gradient {
    0%{background-position:0 0}
    100%{background-position:100% 0}
}
@keyframes beta-gradient { 
    0%{background-position:0 0}
    100%{background-position:100% 0}
}

.colorbar {
  width: 100%;
  height: 200px;
  background: linear-gradient(to right, #B294FF, #57E6E6, #FEFFB8, #57E6E6, #B294FF, #57E6E6);
  background-size: 500% auto;
  -webkit-animation: beta-gradient 3s linear infinite;
  -moz-animation: beta-gradient 3s linear infinite;
  animation: beta-gradient 3s linear infinite;
  position: relative;
  overflow: hidden;
}
.colorbar::after {
  content: "";
  width: 100%;
  height: 200px;
  position: absolute;
  top: 0;
  left: 0;
  background-image: -webkit-linear-gradient(315deg, rgba(9, 79, 153, 0.29), rgba(164, 164, 164, 0.18) 50%, rgba(45, 45, 81, 0.49) 95%), url(https://www.transparenttextures.com/patterns/climpek.png);
  background-image: linear-gradient(135deg, #ffffff00, #ffffff2e 50%, #ffffff00 95%), url(https://www.transparenttextures.com/patterns/climpek.png);
  -webkit-animation: beta-gradient 40s linear infinite;
  -moz-animation: beta-gradient 40s linear infinite;
  animation: beta-gradient 40s linear infinite;
}
<div class="colorbar"></div>

2
  • 1
    Obrigado por responder, deu certo agora, vlw.
    – Vitor Hugo
    26/08/2018 às 23:13
  • @VitorHugo sem problemas jovem, tmj!
    – hugocsl
    27/08/2018 às 0:19
2

Seguindo o raciocínio fornecido pelo Leandro Angelo, seria uma solução, no entanto como eu não quero modificar muito o template para não ter que usar position, vou busca outro jeito, mas caso alguém algum dia precisar vou deixa o código pronto abaixo.

@-webkit-keyframes beta-gradient {
        0%{background-position:0 0}
        100%{background-position:100% 0}
    }
    @-moz-keyframes beta-gradient {
        0%{background-position:0 0}
        100%{background-position:100% 0}
    }
    @keyframes beta-gradient { 
        0%{background-position:0 0}
        100%{background-position:100% 0}
    }
    .colorbar {
            background: linear-gradient(to right, #B294FF, #57E6E6, #FEFFB8, #57E6E6, #B294FF, #57E6E6);
            background-size: 500% auto;    
            -webkit-animation: beta-gradient 3s linear infinite ;
            -moz-animation: beta-gradient 3s linear infinite;
            animation: beta-gradient 3s linear infinite ;
}
.colorbar {
    background: linear-gradient(to right, #B294FF, #57E6E6, #FEFFB8, #57E6E6, #B294FF, #57E6E6);
    background-size: 500% auto;
    -webkit-animation: beta-gradient 3s linear infinite;
    -moz-animation: beta-gradient 3s linear infinite;
    animation: beta-gradient 3s linear infinite;
}
.colorbar {
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    opacity: 0.2;
}
.colorbar-img {
    position: relative;
    height: 200px;
    padding-top: 20px;
    padding-bottom: 20px;
    background-image: -webkit-linear-gradient(315deg, rgba(9, 79, 153, 0.29), rgba(164, 164, 164, 0.18) 50%, rgba(45, 45, 81, 0.49) 95%), url(https://www.transparenttextures.com/patterns/climpek.png);
    background-image: linear-gradient(135deg, #ffffff00, #ffffff2e 50%, #ffffff00 95%), url(https://www.transparenttextures.com/patterns/climpek.png);
    font-size: 16px;
    animation: beta-gradient 40s linear infinite;
}
<div class="colorbar-img">
<div class="colorbar"></div>

1
  • Na verdade da para fazer com uma só div depois da uma olhada na minha resposta. []'s
    – hugocsl
    26/08/2018 às 22:13

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 .