使用CSS实现圆环流水灯、跑马灯、加载渐变动画效果

/* 圆环流水灯动画 */
.circle-carousel {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  overflow: hidden;
  width: 200px;
  height: 200px;
  position: relative;
  margin: 0 auto;
}
 
.circle-carousel .circle {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: #3498db;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}
 
.circle-carousel .circle:nth-child(1) {
  transform: translateX(-100px);
  animation: slide-left 5s linear infinite;
}
 
.circle-carousel .circle:nth-child(2) {
  transform: translateX(100px);
  animation: slide-right 5s linear infinite;
}
 
@keyframes slide-left {
  0% {
    opacity: 0;
    transform: translateX(-100px);
  }
  5% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(-200px);
  }
}
 
@keyframes slide-right {
  0% {
    opacity: 0;
    transform: translateX(100px);
  }
  5% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(200px);
  }
}
 
/* 跑马灯文字滚动效果 */
.marquee {
  white-space: nowrap;
  overflow: hidden;
  width: 200px;
}
 
.marquee span {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 10s linear infinite;
}
 
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}
 
/* 加载渐变动画 */
.loading-gradient {
  width: 100%;
  height: 2px;
  position: relative;
  background: linear-gradient(to right, #ff9a9e, #fad0c4, #fad0c4, #ff9a9e);
  background-size: 200% auto;
  animation: gradient-shift 2s linear infinite;
}
 
@keyframes gradient-shift {
  0% { background-position: 0 0; }
  100% { background-position: -100% 0; }
}

这段代码展示了如何使用CSS创建圆环流水灯、跑马灯以及加载渐变动画效果。圆环流水灯通过定义不同位置的圆形的动画实现，跑马灯效果通过文字滚动实现，而加载渐变动画则通过背景渐变和位置移动实现动态效果。