之前的效果是这样

加了之后效果是这样

因为颜色是变化的，没去截动态图。
大致代码利用的css，没用js，不说了代码如下

<style>
    .font {
      animation: color_change 10000ms ease-out infinite alternate;
      font-size: 50px;
      color: white;
    }
    @keyframes color_change {
      0% {
        border-color: red;
        text-shadow: 0 0 10px rgba(255,0,0,0.6), 0 0 10px rgba(255,0,0,0.4), 0 1px 0 rgba(255,0,0,0.2);
        box-shadow: 0 0 10px rgba(255,0,0,0.6), 0 0 10px rgba(255,0,0,0.4), 0 1px 0 rgba(255,0,0,0.2);
      }
      5% {
        border-color: red;
        text-shadow: 0 0 10px rgba(255,64,0,0.6), 0 0 10px rgba(255,64,0,0.4), 0 1px 0 rgba(255,64,0,0.2);
        box-shadow: 0 0 10px rgba(255,64,0,0.6), 0 0 10px rgba(255,64,0,0.4), 0 1px 0 rgba(255,64,0,0.2);
      }
      10% {
        border-color: red;
        text-shadow: 0 0 10px rgba(255,128,0,0.6), 0 0 10px rgba(255,128,0,0.4), 0 1px 0 rgba(255,128,0,0.2);
        box-shadow: 0 0 10px rgba(255,128,0,0.6), 0 0 10px rgba(255,128,0,0.4), 0 1px 0 rgba(255,128,0,0.2);
      }
      15% {
        border-color: red;
        text-shadow: 0 0 10px rgba(255,192,0,0.6), 0 0 10px rgba(255,192,0,0.4), 0 1px 0 rgba(255,192,0,0.2);
        box-shadow: 0 0 10px rgba(255,192,0,0.6), 0 0 10px rgba(255,192,0,0.4), 0 1px 0 rgba(255,192,0,0.2);
      }
      20% {
        border-color: red;
        text-shadow: 0 0 10px rgba(255,255,0,0.6), 0 0 10px rgba(255,255,0,0.4), 0 1px 0 rgba(255,255,0,0.2);
        box-shadow: 0 0 10px rgba(255,255,0,0.6), 0 0 10px rgba(255,255,0,0.4), 0 1px 0 rgba(255,255,0,0.2);
      }
      25% {
        border-color: red;
        text-shadow: 0 0 10px rgba(192,255,0,0.6), 0 0 10px rgba(192,255,0,0.4), 0 1px 0 rgba(192,255,0,0.2);
        box-shadow: 0 0 10px rgba(192,255,0,0.6), 0 0 10px rgba(192,255,0,0.4), 0 1px 0 rgba(192,255,0,0.2);
      }
      30% {
        border-color: red;
        text-shadow: 0 0 10px rgba(128,255,0,0.6), 0 0 10px rgba(128,255,0,0.4), 0 1px 0 rgba(128,255,0,0.2);
        box-shadow: 0 0 10px rgba(128,255,0,0.6), 0 0 10px rgba(128,255,0,0.4), 0 1px 0 rgba(128,255,0,0.2);
      }
      35% {
        border-color: red;
        text-shadow: 0 0 10px rgba(64,255,0,0.6), 0 0 10px rgba(64,255,0,0.4), 0 1px 0 rgba(64,255,0,0.2);
        box-shadow: 0 0 10px rgba(64,255,0,0.6), 0 0 10px rgba(64,255,0,0.4), 0 1px 0 rgba(64,255,0,0.2);
      }
      40% {
        border-color: red;
        text-shadow: 0 0 10px rgba(0,255,0,0.6), 0 0 10px rgba(0,255,0,0.4), 0 1px 0 rgba(0,255,0,0.2);
        box-shadow: 0 0 10px rgba(0,255,0,0.6), 0 0 10px rgba(0,255,0,0.4), 0 1px 0 rgba(0,255,0,0.2);
      }
      45% {
        border-color: red;
        text-shadow: 0 0 10px rgba(0,255,64,0.6), 0 0 10px rgba(0,255,64,0.4), 0 1px 0 rgba(0,255,64,0.2);
        box-shadow: 0 0 10px rgba(0,255,64,0.6), 0 0 10px rgba(0,255,64,0.4), 0 1px 0 rgba(0,255,64,0.2);
      }
      50% {
        border-color: red;
        text-shadow: 0 0 10px rgba(0,255,128,0.6), 0 0 10px rgba(0,255,128,0.4), 0 1px 0 rgba(0,255,128,0.2);
        box-shadow: 0 0 10px rgba(0,255,128,0.6), 0 0 10px rgba(0,255,128,0.4), 0 1px 0 rgba(0,255,128,0.2);
      }
      55% {
        border-color: red;
        text-shadow: 0 0 10px rgba(0,255,192,0.6), 0 0 10px rgba(0,255,192,0.4), 0 1px 0 rgba(0,255,192,0.2);
        box-shadow: 0 0 10px rgba(0,255,192,0.6), 0 0 10px rgba(0,255,192,0.4), 0 1px 0 rgba(0,255,192,0.2);
      }
      60% {
        border-color: red;
        text-shadow: 0 0 10px rgba(0,255,255,0.6), 0 0 10px rgba(0,255,255,0.4), 0 1px 0 rgba(0,255,255,0.2);
        box-shadow: 0 0 10px rgba(0,255,255,0.6), 0 0 10px rgba(0,255,255,0.4), 0 1px 0 rgba(0,255,255,0.2);
      }
      65% {
        border-color: red;
        text-shadow: 0 0 10px rgba(0,192,255,0.6), 0 0 10px rgba(0,192,255,0.4), 0 1px 0 rgba(0,192,255,0.2);
        box-shadow: 0 0 10px rgba(0,192,255,0.6), 0 0 10px rgba(0,192,255,0.4), 0 1px 0 rgba(0,192,255,0.2);
      }
      70% {
        border-color: red;
        text-shadow: 0 0 10px rgba(0,128,255,0.6), 0 0 10px rgba(0,128,255,0.4), 0 1px 0 rgba(0,128,255,0.2);
        box-shadow: 0 0 10px rgba(0,128,255,0.6), 0 0 10px rgba(0,128,255,0.4), 0 1px 0 rgba(0,128,255,0.2);
      }
      75% {
        border-color: red;
        text-shadow: 0 0 10px rgba(0,64,255,0.6), 0 0 10px rgba(0,64,255,0.4), 0 1px 0 rgba(0,64,255,0.2);
        box-shadow: 0 0 10px rgba(0,64,255,0.6), 0 0 10px rgba(0,64,255,0.4), 0 1px 0 rgba(0,64,255,0.2);
      }
      80% {
        border-color: red;
        text-shadow: 0 0 10px rgba(0,0,255,0.6), 0 0 10px rgba(0,0,255,0.4), 0 1px 0 rgba(0,0,255,0.2);
        box-shadow: 0 0 10px rgba(0,0,255,0.6), 0 0 10px rgba(0,0,255,0.4), 0 1px 0 rgba(0,0,255,0.2);
      }
      85% {
        border-color: red;
        text-shadow: 0 0 10px rgba(0,0,192,0.6), 0 0 10px rgba(0,0,192,0.4), 0 1px 0 rgba(0,0,192,0.2);
        box-shadow: 0 0 10px rgba(0,0,192,0.6), 0 0 10px rgba(0,0,192,0.4), 0 1px 0 rgba(0,0,192,0.2);
      }
      90% {
        border-color: red;
        text-shadow: 0 0 10px rgba(0,0,128,0.6), 0 0 10px rgba(0,0,128,0.4), 0 1px 0 rgba(0,0,128,0.2);
        box-shadow: 0 0 10px rgba(0,0,128,0.6), 0 0 10px rgba(0,0,128,0.4), 0 1px 0 rgba(0,0,128,0.2);
      }
      95% {
        border-color: red;
        text-shadow: 0 0 10px rgba(0,0,64,0.6), 0 0 10px rgba(0,0,64,0.4), 0 1px 0 rgba(0,0,64,0.2);
        box-shadow: 0 0 10px rgba(0,0,64,0.6), 0 0 10px rgba(0,0,64,0.4), 0 1px 0 rgba(0,0,64,0.2);
      }
      100% {
        border-color: red;
        text-shadow: 0 0 10px rgba(0,0,0,0.6), 0 0 10px rgba(0,0,0,0.4), 0 1px 0 rgba(0,0,0,0.2);
        box-shadow: 0 0 10px rgba(0,0,0,0.6), 0 0 10px rgba(0,0,0,0.4), 0 1px 0 rgba(0,0,0,0.2);
      }
    }
  </style>

这个代码有点多，不过颜色变化比较平滑。有种纵向丝滑的感觉
text-shadow这个是文字效果
box-shadow这个是边框特效，可根据实际情况取舍