Question

如何使字体很棒的图标像彩虹一样自动更改颜色。在我当前的代码中，文本正在更改颜色，但是我也希望图标也更改颜色。

您可以在此处找到代码示例：

@import url(https://fonts.googleapis.com/css?family=Pacifico);
@import url('https://fonts.googleapis.com/css?family=Anton');

h1, h2{
  text-align:center;
}

h1{
  color:rgba(100, 50, 255, .8);
  font-family: 'Pacifico', cursive;
  color:#212121;
}

.rainbow {
  
   /* Font options */
  font-family: 'Pacifico', cursive;
  text-shadow: 2px 2px 4px #000000;
  font-size:40px;
  
   /* Chrome, Safari, Opera */
  -webkit-animation: rainbow 5s infinite; 
  
  /* Internet Explorer */
  -ms-animation: rainbow 5s infinite;
  
  /* Standar Syntax */
  animation: rainbow 5s infinite; 
}

/* Chrome, Safari, Opera */
@-webkit-keyframes rainbow{
  0%{color: orange;}	
  10%{color: purple;}	
	20%{color: red;}
  30%{color: CadetBlue;}
	40%{color: yellow;}
  50%{color: coral;}
	60%{color: green;}
  70%{color: cyan;}
  80%{color: DeepPink;}
  90%{color: DodgerBlue;}
	100%{color: orange;}
}

/* Internet Explorer */
@-ms-keyframes rainbow{
   0%{color: orange;}	
  10%{color: purple;}	
	20%{color: red;}
  30%{color: CadetBlue;}
	40%{color: yellow;}
  50%{color: coral;}
	60%{color: green;}
  70%{color: cyan;}
  80%{color: DeepPink;}
  90%{color: DodgerBlue;}
	100%{color: orange;}
}

/* Standar Syntax */
@keyframes rainbow{
    0%{color: orange;}	
  10%{color: purple;}	
	20%{color: red;}
  30%{color: CadetBlue;}
	40%{color: yellow;}
  50%{color: coral;}
	60%{color: green;}
  70%{color: cyan;}
  80%{color: DeepPink;}
  90%{color: DodgerBlue;}
	100%{color: orange;}
}

body{
  background-color:#607D8B;
}

.container{
  background-color:#E0F2F1;
  padding:10px;
  border-radius:15px;
  box-shadow: 10px 10px 20px 0px rgba(0,0,0,0.75);
}

<div class="container">
  <h1>SIMPLE CSS RAINBOW TEXT</h1>

  <h2 class="rainbow">Rainbow Text</h2>
</div>

Answer 1

在下面，您可以看到我只是重用了您的代码来更改字体真棒图标的颜色。

字体真棒图标的更改颜色与文本类似，即使用color

在以下代码段中，我刚刚将彩虹类分配给了字体超棒的图标。

.rainbow {
  /* Chrome, Safari, Opera */
  -webkit-animation: rainbow 5s infinite;
  /* Internet Explorer */
  -ms-animation: rainbow 5s infinite;
  /* Standar Syntax */
  animation: rainbow 5s infinite;
}


/* Chrome, Safari, Opera */

@-webkit-keyframes rainbow {
  0% {
    color: orange;
    transform: rotate(360deg);
  }
  10% {
    color: purple;
  }
  20% {
    color: red;
  }
  30% {
    color: CadetBlue;
  }
  40% {
    color: yellow;
  }
  50% {
    color: coral;
  }
  60% {
    color: green;
  }
  70% {
    color: cyan;
  }
  80% {
    color: DeepPink;
  }
  90% {
    color: DodgerBlue;
  }
  100% {
    color: orange;
  }
}


/* Internet Explorer */

@-ms-keyframes rainbow {
  0% {
    color: orange;
    transform: rotate(360deg);
  }
  10% {
    color: purple;
  }
  20% {
    color: red;
  }
  30% {
    color: CadetBlue;
  }
  40% {
    color: yellow;
  }
  50% {
    color: coral;
  }
  60% {
    color: green;
  }
  70% {
    color: cyan;
  }
  80% {
    color: DeepPink;
  }
  90% {
    color: DodgerBlue;
  }
  100% {
    color: orange;
  }
}


/* Standar Syntax */

@keyframes rainbow {
  0% {
    color: orange;
    transform: rotate(360deg);
  }
  10% {
    color: purple;
  }
  20% {
    color: red;
  }
  30% {
    color: CadetBlue;
  }
  40% {
    color: yellow;
  }
  50% {
    color: coral;
  }
  60% {
    color: green;
  }
  70% {
    color: cyan;
  }
  80% {
    color: DeepPink;
  }
  90% {
    color: DodgerBlue;
  }
  100% {
    color: orange;
  }
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">

<i class="fas fa-exclamation-triangle rainbow fa-7x"></i>

编辑：更新了帖子以回答OP的第二个问题，该问题位于评论部分'

Answer 2

只给一类彩虹：

@import url(https://fonts.googleapis.com/css?family=Pacifico);
@import url('https://fonts.googleapis.com/css?family=Anton');
h1,
h2 {
  text-align: center;
}

h1 {
  color: rgba(100, 50, 255, .8);
  font-family: 'Pacifico', cursive;
  color: #212121;
}

.rainbow {
  /* Font options */
  font-family: 'Pacifico', cursive;
  text-shadow: 2px 2px 4px #000000;
  font-size: 40px;
  /* Chrome, Safari, Opera */
  -webkit-animation: rainbow 5s infinite;
  /* Internet Explorer */
  -ms-animation: rainbow 5s infinite;
  /* Standar Syntax */
  animation: rainbow 5s infinite;
}


/* Chrome, Safari, Opera */

@-webkit-keyframes rainbow {
  0% {
    color: orange;
  }
  10% {
    color: purple;
  }
  20% {
    color: red;
  }
  30% {
    color: CadetBlue;
  }
  40% {
    color: yellow;
  }
  50% {
    color: coral;
  }
  60% {
    color: green;
  }
  70% {
    color: cyan;
  }
  80% {
    color: DeepPink;
  }
  90% {
    color: DodgerBlue;
  }
  100% {
    color: orange;
  }
}


/* Internet Explorer */

@-ms-keyframes rainbow {
  0% {
    color: orange;
  }
  10% {
    color: purple;
  }
  20% {
    color: red;
  }
  30% {
    color: CadetBlue;
  }
  40% {
    color: yellow;
  }
  50% {
    color: coral;
  }
  60% {
    color: green;
  }
  70% {
    color: cyan;
  }
  80% {
    color: DeepPink;
  }
  90% {
    color: DodgerBlue;
  }
  100% {
    color: orange;
  }
}


/* Standar Syntax */

@keyframes rainbow {
  0% {
    color: orange;
  }
  10% {
    color: purple;
  }
  20% {
    color: red;
  }
  30% {
    color: CadetBlue;
  }
  40% {
    color: yellow;
  }
  50% {
    color: coral;
  }
  60% {
    color: green;
  }
  70% {
    color: cyan;
  }
  80% {
    color: DeepPink;
  }
  90% {
    color: DodgerBlue;
  }
  100% {
    color: orange;
  }
}

body {
  background-color: #607D8B;
}

.container {
  background-color: #E0F2F1;
  padding: 10px;
  border-radius: 15px;
  box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.75);
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="rainbow">
  <section id="hand">

    <div class="row fontawesome-icon-list">



      <div class="fa-hover col-md-3 col-sm-4"><a href="../icon/hand-rock-o"><i class="rainbow fa fa-hand-grab-o" aria-hidden="true"></i> <span class="sr-only">Example of </span>hand-grab-o <span class="text-muted">(alias)</span></a></div>


  </div>

动画彩虹图案中图标的颜色

2 个答案: