纯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;
  }
}

效果: 

 

原文地址:https://www.cnblogs.com/chalkbox/p/13054825.html