CSS 转换源问题

Question

我正在研究漂浮的幽灵 here .

我遇到的问题是 transform-origin 属性。现在阴影(底部的椭圆)似乎从左向右扩展，然后再次向该方向收缩。我想要的行为是让阴影从中间扩展和收缩 - 因此 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

好的，我为您准备了一个解决方案。

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

这是我编辑的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 .