4

tenho um código que está fazendo transições de cor, tem como deixar um fade nessa transição, ou seja, para ela nao ficar mudando tão "seca", estou fazendo com JS, existe algum CSS que faz isso? enfim, queria que na transição de cor, um fade fosse executado.

EXEMPLO

2
  • Já há muitas perguntas sobre isto... usa CSS transitions e dá uma classe com jQuery...
    – Sergio
    6/04/2015 às 13:01
  • pode fazer um exemplo @Sergio ?
    – Furlan
    6/04/2015 às 13:07

4 Respostas 4

4

Se queres fazer um efeito de algo a piscar (com fade-in e fade-out) podes fazer assim:

CSS:

#pisca {
    color: #fff;
    transition: color .7s;
}
.mostrar {
    color: #f34 !important;
}

JavaScript:

function pisca() {
    var $pisca = $('#pisca');
    $pisca.addClass('mostrar');
    setTimeout(function () {
        $pisca.removeClass('mostrar');
    }, 750);
}

window.onload = function () {
    setInterval(pisca, 1500);
}

jsFiddle: https://jsfiddle.net/s0r82xbx/

Desta maneira não precisa o jQuery-UI e fazes a animação com CSS. Repara que o efeito de fade-in/fade-out neste exemplo é fictício pois estou a fazer mudaça de côr entre a côr do background (pano de fundo branco) e vermelho, dando assim a ilusão de fade.

Se quiseres fazer mudança de opacidade podes fazer assim (usando o mesmo principio de transição) ficaria assim (jsfiddle.net/s0r82xbx/1/), mas apesar o efeito é menos interessante.

3

O efeito de "texto a piscar" pode ser obtido recorrendo apenas a CSS:

p {
  background-color: #000;
}
.piscar {
  color: #FFF;
  -webkit-animation-name: blinker;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-name: blinker;
  -moz-animation-duration: 1s;
  -moz-animation-timing-function: linear;
  -moz-animation-iteration-count: infinite;
  animation-name: blinker;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@-moz-keyframes blinker {
  0% {
    opacity: 1.0;
  }
  50% {
    opacity: 0.0;
  }
  100% {
    opacity: 1.0;
  }
}
@-webkit-keyframes blinker {
  0% {
    opacity: 1.0;
  }
  50% {
    opacity: 0.0;
  }
  100% {
    opacity: 1.0;
  }
}
@keyframes blinker {
  0% {
    opacity: 1.0;
  }
  50% {
    opacity: 0.0;
  }
  100% {
    opacity: 1.0;
  }
}
<p>
  <span class="piscar">Olha lá pá, vez-me a piscar?</span>
</p>

0
0

Tem algumas opções abaixo que você utilizando o CSS modificando a cor para branco pode contribuir.

Caso você queira modificar o estado dar cor em algum link através do comportamento do mouse, usar:

a:link {
    color: #;
}

/* Quando entra no no navegar carrega a tela a cor fica "00FF00" */
a:visited {
    color: #00FF00;
}

/* Quando passa o mouse por cima a cor fica rosa */
a:hover {
    color: #FF00FF;
}

/* Quando aperta o link a cor passa pra azul escuro */
a:active {
    color: #0000FF;
}

Você também poderá utilizar esses eventos do mouse para adicionar um underline em baixo da palavra :

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:active {
    text-decoration: underline;
}

Poderá modificar o background da palavra exemplo :

a:link {
    background-color: #B2FF99;
}

a:visited {
    background-color: #FFFF85;
}

a:hover {
    background-color: #FF704D;
}

a:active {
    background-color: #FF704D;
}
0

Usando o hover como exemplo, é possível fazer uma transição na cor facilmente usando a propriedade transition do CSS.

Com o simples HTML: <span class="cor">Teste</span>

E o CSS (Neste caso, SASS):

span.cor
    font-size: 30pt
    color: red
    transition: color ease-in-out 2s
    &:hover
        color: blue
        transition: color ease-in-out 2s

Veja que defino uma cor para o estado natural da classe, e outra para o :hover. A transition me diz que a propriedade color vai transicionar de maneira linear, entre as cores definidas por mim, em um tempo de 2s. Leia mais sobre transitions aqui.

Um exemplo do funcionamento desse código pode ser visto nesta pen.

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 .