Question

我一直在努力解决这个问题，为什么这个动画会将我的圆圈移到右下角。它在我想要的正确时间正确地进行脉冲和缩放，但是圆圈从中间开始并且偏向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>

Answer 1

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

＆＃13;

@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);
  }
}

＆＃13;

<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>

＆＃13;

为什么这个动画会向右下方移动？

1 个答案: