渐变动画效果

利用CSS背景渐变色，并设置比较大比例的背景，通过CSS动画控制背景位置移动以实现效果。
渐变动画效果.gif

  1. @keyframes fluxay {
  2.     0% {
  3.         background-position: 0;
  4.     }
  6.     50% {
  7.         background-position: 100%;
  8.     }
  10.     100% {
  11.         background-position: 0;
  12.     }
  13. }
  15. .fluxay-box {
  16.     width: 400px;
  17.     height: 200px;
  18.       /* 根据需要设置颜色 */
  19.     background-image: linear-gradient(120deg, #db73ec, #be8ef3, #5ab4f5, #73ecec, #73ecb4, #a7ec73, #ecdd73, #eca073, #ec7389);
  20.     background-size: 800%;
  21.     animation: fluxay 8s infinite;
  22. }

文字流光效果

Animate.css官网的标题文字颜色效果。
文字流光效果.gif

  1. @keyframes hue {
  2.     from {
  3.         filter: hue-rotate(0);
  4.     }
  6.     to {
  7.         filter: hue-rotate(360deg);
  8.     }
  9. }
  11. .text-hue {
  12.     color: #f35626;
  13.     background-color: coral;
  14.     -webkit-background-clip: text;
  15.     -webkit-text-fill-color: transparent;
  16.     background-image: -webkit-linear-gradient(45deg, #f35626, #feab3a);
  17.     animation: hue 12s infinite linear;
  18. }