时间戳

首页 > 解决方案 > 如何按顺序为同一轨道路径上的多个元素设置动画？

css - 如何按顺序为同一轨道路径上的多个元素设置动画？

问题描述

我想创建一个动画，显示几个圆圈在轨道上一个接一个地移动。目前，我创建了三个圆圈，但它们出现在不同的线上，因此以圆周运动的方式移动，但作为一条线。如何更改代码以实现我想要的运动？这是一个具有当前状态的代码笔。

这是我使用的代码：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Lato', sans-serif;
  font-size: 18px;
  line-height: 1.6;
  background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  min-height: 100vh;
}

.loader {
  height: 50px;
  animation: rotate 6s linear infinite;
}

.circle {
  display: inline-block;
  background-color: purple;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  transform: scale(0);
  animation: grow 1.5s linear infinite;
  margin: -20p;
}

.circle:nth-child(2) {
  background-color: palevioletred;
  transform: scale(0);
  animation-delay: 0.20s;
}

@keyframes rotate {
  to {
    transform: rotate(360deg)
  }
}

@keyframes grow {
  50% {
    transform: scale(1);
  }
}
<div class="loader">
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
</div>

标签： csscss-animations

解决方案

我正在创建可以设置为初始旋转点的全尺寸“板”。圆圈最终成为板上的伪元素（以避免额外的标记）。修改初始旋转值以使圆圈靠得更近。

.loader {
  width: 100px;
  height: 100px;
  animation: rotate 6s linear infinite;
  position: relative;
}

.plate {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.plate:nth-child(2) {
  transform: rotate(120deg);
}

.plate:nth-child(3) {
  transform: rotate(240deg);
}

.plate:before {
  content: '';
  position: absolute;
  background-color: red;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  transform: scale(0);
  animation: grow 1.5s linear infinite;
}

.plate:nth-child(2):before {
  background: green;
}

.plate:nth-child(3):before {
  background: blue;
}

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

@keyframes grow {
  50% {
    transform: scale(1);
  }
}

* {
  box-sizing: bordr-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Lato", sans-serif;
  font-size: 18px;
  line-height: 1.6;
  background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  min-height: 100vh;
}
<body>
  <div class="loader">
    <div class="plate"></div>
    <div class="plate"></div>
    <div class="plate"></div>
  </div>
</body>

推荐阅读