html - 为什么此动画移到右下 Angular ？

我一直在努力，为什么这个动画将我的圈子移到右下角还是很棘手。它会在我想要的正确时间正确地脉动和缩放，但圆圈从中间开始并偏向div的右下角。

我希望他们在标题文本后面的Div中间居中

@import url('https://fonts.googleapis.com/css?family=Lobster+Two');
h1 {
  font-family: 'Lobster Two', cursive;
  font-size: 5rem;
  color: #343434;
}
.container {
  position: fixed;
  z-index: 0;
  background-color: transparent;
    display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  overflow: hidden;
}
.pulse {
  z-index: -1;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 30rem;
}
.pulse circle {
  fill: #ff5154;
  transform: scale(0);
  opacity: 0;
  animation: pulse 2s;
  animation-fill-mode: forwards;
  transition-timing-function: cubic-bezier(0.5, 0.5, 0, 1);
}
.pulse circle:nth-child(2) {
  fill: #7fc6a4;
  animation: pulse 2s 1.75;
  transition-timing-function: cubic-bezier(0.5, 0.5, 0, 1);
}
.pulse circle:nth-child(3) {
  fill: #e5f77d;
  animation: pulse 2s 2.00;
  transition-timing-function: cubic-bezier(0.5, 0.5, 0, 1);
}
@keyframes pulse {
  25% {
    opacity: 0.7;
  }
  100% {
    transform: scale(1.05);
  }
}

这是HTML。

<div class="container">

    <h1>Pulse Animation</h1>

    <svg class="pulse" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <circle id="Oval" cx="512" cy="512" r="512"></circle>
        <circle id="Oval" cx="512" cy="512" r="512"></circle>
        <circle id="Oval" cx="512" cy="512" r="512"></circle>
</svg>

</div>

最佳答案

我对您的CSS进行了一些更改，以使其正常工作。我将脉冲类元素的顶部和左侧更改为0％，而不是50％，然后在圆形类元素上使用transform-origin将它们居中。

@import url('https://fonts.googleapis.com/css?family=Lobster+Two');
h1 {
  font-family: 'Lobster Two', cursive;
  font-size: 5rem;
  color: #343434;
}
.container {
  position: fixed;
  z-index: 0;
  background-color: transparent;
	display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  overflow: hidden;
}
.pulse {
  z-index: -1;
  position: fixed;
  top: 0%;
  left: 0%;
  max-width: 30rem;
}
.pulse circle {
  fill: #ff5154;
  transform: scale(0);
  opacity: 0;
  animation: pulse 2s;
  animation-fill-mode: forwards;
	transform-origin: 50% 50%;
  transition-timing-function: cubic-bezier(0.5, 0.5, 0, 1);
}
.pulse circle:nth-child(2) {
  fill: #7fc6a4;
  animation: pulse 2s 1s;
  transition-timing-function: cubic-bezier(0.5, 0.5, 0, 1);
}
.pulse circle:nth-child(3) {
  fill: #e5f77d;
  animation: pulse 2s 2s;
  transition-timing-function: cubic-bezier(0.5, 0.5, 0, 1);
}
@keyframes pulse {
  25% {
    opacity: 0.7;
  }
  100% {
    transform: scale(1.05);
  }
}

<div class="container">
  <h1>Pulse Animation</h1>
	<svg class="pulse" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
	  <circle id="Oval" cx="512" cy="512" r="512"></circle>
		<circle id="Oval" cx="512" cy="512" r="512"></circle>
		<circle id="Oval" cx="512" cy="512" r="512"></circle>
	</svg>
</div>

关于html - 为什么此动画移到右下 Angular ？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50634837/