[分享]css动画摩天轮效果

CSS动画是Web设计中的一种非常重要的技术，它可以让网页的效果更加生动、更加有趣。其中，摩天轮效果是一种非常受欢迎的动画效果。下面我们就来介绍一下如何使用CSS来实现摩天轮效果。/ 先定义要用到的颜...

CSS动画是Web设计中的一种非常重要的技术，它可以让网页的效果更加生动、更加有趣。其中，摩天轮效果是一种非常受欢迎的动画效果。下面我们就来介绍一下如何使用CSS来实现摩天轮效果。

/* 先定义要用到的颜色变量 */
:root {
  --blue: #6398ff;
  --green: #50a82d;
  --red: #e64343;
}

/* 制作轮盘 */
.ring {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  margin: 50px auto;
  animation: rotation 10s linear infinite;
}

/* 轮盘中的小球 */
.ball {
  position: absolute;
  top: calc(50% - 15px);
  left: calc(50% - 15px);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: var(--blue);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  animation: ballMove 2s ease-in-out infinite alternate;
}

/* 制作轮盘旋转动画 */
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 制作小球移动动画 */
@keyframes ballMove {
  from {
    background-color: var(--blue);
    top: calc(50% - 15px);
    left: calc(50% - 15px);
  }
  25% {
    background-color: var(--green);
    top: 0;
    left: calc(50% - 45px);
  }
  50% {
    background-color: var(--red);
    top: calc(50% - 30px);
    left: calc(50% - 60px);
  }
  75% {
    background-color: var(--green);
    top: calc(100% - 45px);
    left: calc(50% - 45px);
  }
  to {
    background-color: var(--blue);
    top: calc(50% - 15px);
    left: calc(50% - 15px);
  }
} 

以上代码就是实现摩天轮效果的CSS代码，其中包括了轮盘、小球等元素的样式设置，以及轮盘旋转和小球移动的动画设置。

如果您想为您的网站添加一些动态效果，赶快试试CSS动画吧，让您的网站更加生动、更加有趣！