Question

我正在制作一个浮动here的幽灵。

我遇到的问题是transform-origin属性。现在，阴影（底部的椭圆）似乎从左向右扩展，然后再向那个方向收缩。我想要的行为是阴影从中间扩展和缩小 - 因此转换起源：50％50％;。

这是相关的代码，虽然它有助于查看Codepen：

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -64.5px;
  margin-top: -85.5px;
}

.shadow {
  margin-left: 22px;
  animation: shrink 3s ease-out infinite;
  transform-origin: center center;
  ellipse {
    transform-origin: center center;
  }
}

@keyframes shrink {
  0% {
    width: 20%;
  }
  50% {
    width: 27%;
  }
  100% {
    width: 20%;
  }
}

如果有人有任何想法，非常感谢你！因某种原因真的在努力。

Answer 1

好的，我找到了一个解决方案。

我所做的是使用边距和宽度来保持动画居中。我还给了p标签，其中包含svg阴影设置的鬼影宽度，以保持阴影居中。

这是我编辑的CSS，

.shadowFrame {
 width: 130px;
}
.shadow {
  animation: shrink 3s ease-out infinite;
  transform-origin: center center;
  ellipse {
    transform-origin: center center;
  }
}

@keyframes shrink {
  0% {
    width: 90%;
    margin: 0 5%;
  }
  50% {
    width: 60%;
    margin: 0 20%;
  }
  100% {
    width: 90%;
    margin: 0 5%;
  }
}

这是live link。

CSS转换起源问题

1 个答案: