CSS渐变背景动画实现方法

.gradient-bg {
  width: 300px;
  height: 100px;
  background: linear-gradient(45deg, #ff7a00, #ff0080, #c700ff);
  background-size: 300% 300%;
  animation: gradientShift 3s ease infinite;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.colorBlend {
  position: relative;
  width: 200px;
  height: 100px;
  overflow: hidden;
}

.colorBlend::before,
.colorBlend::after {
  content: '';
  position: absolute;
  inset: 0;
  transition: opacity 1s ease;
  background: linear-gradient(60deg, #f09, #0cf);
  border-radius: 10px;
}

.colorBlend::after {
  background: linear-gradient(60deg, #0cf, #34d1b8);
  opacity: 0;
}

.colorBlend:hover::before {
  opacity: 0;
}
.colorBlend:hover::after {
  opacity: 1;
}

.rotateGradient {
  width: 150px;
  height: 150px;
  background: conic-gradient(from 0deg, #ff6b6b, #4ecdc4, #45b7d1);
  border-radius: 50%;
  position: relative;
  overflow: hidden;
}

.rotateGradient::before {
  content: '';
  position: absolute;
  inset: -10%;
  background: inherit;
  border-radius: 50%;
  animation: spin 4s linear infinite;
  z-index: -1;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}