[分享]css3怎样让线性渐变一直动

CSS3中有许多强大的样式特性，其中线性渐变是一个常用的效果。在这里，我们将看到如何通过CSS3使线性渐变保持不断的运动。 / 定义线性渐变 / background: lineargradient(...

CSS3中有许多强大的样式特性，其中线性渐变是一个常用的效果。在这里，我们将看到如何通过CSS3使线性渐变保持不断的运动。

 /* 定义线性渐变 */
  background: linear-gradient(to right, #9933ff, #0099ff);

  /* 添加动画 */
  animation: gradient 5s ease-in-out infinite;
  
  /* 定义动画 */
  @keyframes gradient {
    0% {
      background-position: 0% 50%;
    } 
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  } 

以上代码所做的内容是首先定义了一个线性渐变，然后添加了一个名为"gradient"的动画，并在动画中定义了渐变的位置随时间变化的情况。这个动画将在5秒内不断重复循环。

可以看到，在动画中，关键帧的百分比变化会使背景位置发生变化，从而带动线性渐变改变。其中，0%和100%的百分比分别指定了变化的起始和结束状态，而50%指定了变化最快的时刻。

通过这种方式，我们就能够巧妙地利用CSS3的特性让线性渐变不断地动起来。