3

Tenho esse link que mostra/esconde o menu do site, quero chamar a atenção dos usuários para ele mudando a cor da fonte, é possível fazer somente com CSS?

setInterval(function(){
  if ($('#toggleMenu').hasClass('colored')) {
    $('#toggleMenu').css('color','#FAFAFA');
    $('#toggleMenu').removeClass('colored');
  } else {
    $('#toggleMenu').css('color','#0069D9');
    $('#toggleMenu').addClass('colored');
  }
}, 2000);
header {
  background-color: grey;
  padding: 0 5%;
}

#toggleMenu {
  text-decoration: none;
  color: #FAFAFA;
  transition: color 2s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" rel="stylesheet"/>
<header>
<a id="toggleMenu" href="#" style="font-size: 2em"><i class="fas fa-bars"></i></a>
</header>

2 Respostas 2

5

É possível sim, basta trocar o color do ícone, pois ela é uma propriedade que pode ser animada sem problemas. Como o FontAwesome é uma fonte vc deve usar o color para isso, e com o @keygrames vc faz a animação. Aqui vc pode ler mais sobre os @keyframes https://developer.mozilla.org/pt-BR/docs/Web/CSS/@keyframes

Um exemplo aplicando a técnica. inserir a descrição da imagem aqui

Para simular o mesmo efeito que vc fez com jQuery a animação tem 4s, sendo que demora 2s para trocar a cor (50% da animação) e mais 2s para voltar para a cor original (outros 50% da animação). Pra entender melhor olha o código abaixo.

.fa-bars {
	color: #FAFAFA;
	animation: bg 4s infinite;

}
@keyframes bg {
	50% {
		color: #0069D9;
	}
}

header {
	background-color: silver;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" rel="stylesheet"/>

<header>
  <a id="toggleMenu" href="#" style="font-size: 2em"><i class="fas fa-bars"></i></a>
</header>

7
  • 1
    Brother, bem que você poderia postar sobre tecnologia no twitter ou em um blog heim? Acho que tem muito conteúdo pra postar... Commented 11/07/2019 às 2:50
  • 1
    @LaércioLopes obrigado amigo agradeço pelas palavras, é isso que motiva a gente a continuar colaborando. Eu até tenho vontade até de fazer um canal no Youtube, não por eu ter conteúdo de mais, mas pra poder passar um pouco do que vejo em inglês que sei que tem gente que não tem acesso tão fácil a essas conteúdo em português... Valeu a força []´s
    – hugocsl
    Commented 11/07/2019 às 10:20
  • 1
    Valeu, tamo junto! Commented 11/07/2019 às 11:30
  • Meu amigo! Será que tu sabe como resolver essa situação? pt.stackoverflow.com/questions/422999/… Commented 22/11/2019 às 18:29
  • 1
    Desculpa o incomodo cara, fiz mais testes aqui e consegui resolver! Commented 22/11/2019 às 18:59
1

no css existem os @keyframes onde possibilita a criação de animacões somente com html e css.

A Regra @keyframes Ao especificar estilos CSS dentro da @keyframes regra, a animação irá gradualmente mudar a partir do estilo atual para o novo estilo em determinados momentos.

Para se ter uma animação para o trabalho, você deve ligar a animação a um elemento.

div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: changeColor 5s infinite;
}


@-webkit-keyframes changeColor {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}
<div></div>

fonte: https://www.w3schools.com/css/css3_animations.asp

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 .