CSS渐变动画实现动态效果

.gradient-flow {
  width: 100%;
  height: 200px;
  background: linear-gradient(45deg, #ff7a00, #fbbf24, #3b82f6, #10b981);
  background-size: 400% 400%;
  animation: flowAnimation 6s ease infinite;
}

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

.pulse-border {
  width: 150px;
  height: 150px;
  position: relative;
  border: 4px solid transparent;
  border-radius: 10px;
  background: conic-gradient(from 0deg, #ff0080, #00bfff, #00ff80, #fbc02d);
  -webkit-mask: 
    linear-gradient(white, white) padding-box, 
    linear-gradient(white, white);
  mask: 
    linear-gradient(white, white) padding-box, 
    linear-gradient(white, white);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  animation: rotateGradient 3s linear infinite;
}
@keyframes rotateGradient {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.breathing-glow {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle, #ff5e5e, #6b0f1a);
  animation: breathe 2s ease-in-out infinite alternate;
}

@keyframes breathe {
  from {
    background: radial-gradient(circle, #ff5e5e, #6b0f1a);
  }
  to {
    background: radial-gradient(circle, #ff9f9f, #c83737);
  }
}