純CSS實現彩色文字/文字漸變

利用CSS實現多彩文字：

設置樣式：
h3 {
  font-size: 2rem;
  text-transform: uppercase;
  color: line;
  font-weight: 600;
  font-size: 1.8rem;
  font-family: Arial;
  line-height: 0.833;
  letter-spacing: 10px;
  color: #fff;
  background: -webkit-linear-gradient(45deg, #00a0e9, #10d39d, #00a0e9, #10d39d);
  -moz-linear-gradient(45deg, #00a0e9, #10d39d, #00a0e9, #10d39d);
  -ms-linear-gradient(45deg, #00a0e9, #10d39d, #00a0e9, #10d39d);
 /* 漸變背景 */

  color: transparent;
  /*設置字體顏色透明*/
  -webkit-background-clip: text;
  /*背景裁剪為文本形式*/
  animation: ran 20s linear infinite;
  /*動態20s展示*/
}

做一個動畫效果：

@keyframes ran {

  from {

      backgroud-position: 0 0;

  }

  to {

      background-position: 1000px 0;

  }

}

 

效果：