使用旋转（45度）播放CSS动画的中心位置

Question

我有以下代码：

#containerScroll {
  height: 5em;
}

scroll {
  transform: translateY(0%) rotate(45deg);
  opacity: 0;
}

.first-scroll {
  left: calc(52.3% - 1em) !important;
  width: 2em;
  height: 2em;
  background-color: transparent;
  z-index: 80;
  bottom: 25px;
  border-width: 0 0.25em 0.25em 0;
  border-style: solid;
  border-color: black;
  position: absolute;
  animation: scrolldown1 1.2s ease-in-out infinite 0.15s;
}

.second-scroll {
  left: calc(52.3% - 1em) !important;
  width: 2em;
  height: 2em;
  background-color: transparent;
  z-index: 80;
  bottom: 40px;
  position: absolute;
  border-width: 0 0.25em 0.25em 0;
  border-style: solid;
  border-color: black;
  animation: scrolldown1 1.2s ease-in-out infinite;
}

@keyframes scrolldown1 {
  0% {
    transform: translateY(20%) rotate(45deg);
    opacity: 0.7;
  }
  50% {
    transform: translateY(0%) rotate(45deg);
    opacity: 0.2;
  }
  100% {
    transform: translateY(20%) rotate(45deg);
    opacity: 0.7;
  }
}

<div id="containerScroll">
  <scroll class="first-scroll"></scroll>
  <scroll class="second-scroll"></scroll>
</div>

在我看来，输出如下所示：

这正是我想要的，因为向下滚动按钮与文本顶部对齐，我通过设置 left: calc(52.3% - 1em) !important; 实现了这一点。就我而言，这个属性是让它在文本顶部完美对齐的原因。

问题是当我缩小时，我得到这个输出：

如您所见，滚动按钮的对齐方式发生了变化，并且向右移动了，我很确定这是因为 left: calc(52.3% - 1em) !important; 属性。但我不想更改或删除此属性，因为这是使它在100% zoom 上完美对齐的原因。有没有办法解决这个问题？例如，当我缩小网站时，滚动按钮对齐方式不会改变并且保持不变？有什么建议吗？

Answer 1

这是一个非常酷的动画！

为了完美居中，我做了以下更改：

• 这是用来使 div 居中的，left: calc(52.3% - 1em) !important;；我已经完全删除了它，并使用了一个简单的 <center> 标记将其居中。
• 然后动画代码本身直接在中心右侧运行（偏离中心）。您可以通过使用translateX(-50%) 将元素向左移动其自身宽度的 50% 来解决此问题。
• 当然，你不能真正使用50%，因为一个正方形的盒子，在它的一边旋转，它的宽度增加了大约45%的一个因子，这意味着我们需要翻译Y而不是50%，但是66%。

#containerScroll {
  height: 5em;
}

scroll {
  transform: translateY(0%) rotate(45deg);
  opacity: 0;
}

.first-scroll {
  margin: auto;
  width: 2em;
  height: 2em;
  background-color: transparent;
  z-index: 80;
  bottom: 25px;
  border-width: 0 0.25em 0.25em 0;
  border-style: solid;
  border-color: black;
  position: absolute;
  animation: scrolldown1 1.2s ease-in-out infinite 0.15s;
}

.second-scroll {
  width: 2em;
  height: 2em;
  background-color: transparent;
  z-index: 80;
  bottom: 40px;
  position: absolute;
  border-width: 0 0.25em 0.25em 0;
  border-style: solid;
  border-color: black;
  animation: scrolldown1 1.2s ease-in-out infinite;
}

@keyframes scrolldown1 {
  0% {
    transform: translateY(20%) rotate(45deg) translateX(-66%);
    opacity: 0.7;
  }
  50% {
    transform: translateY(0%) rotate(45deg) translateX(-66%);
    opacity: 0.2;
  }
  100% {
    transform: translateY(20%) rotate(45deg) translateX(-66%);
    opacity: 0.7;
  }
}

<div id="containerScroll">
<center>
  <scroll class="first-scroll"></scroll>
  <scroll class="second-scroll"></scroll>
</center>
</div>

<div style="border:1px solid black;">
<center>&bull;<br>
This dot is perfectly centered.
</center>
</div>

Answer 2

如果没有完整的代码片段可以完全重现您的问题，我只能尝试使用您拥有的代码重新创建它。

您可以将my-story 和containerScroll 元素放在部分标题中。然后让containerScroll position absolute改变显示 到 flex。将其 top 位置设置为 0 并声明宽度 100% 和高度 10em 或您希望它的高度是什么，只需确保 my-story 元素在其 css 中设置的 top margin 与 containerScroll 的高度相同.

我已经对此进行了测试，当我使用 CNTL + 鼠标滚轮 ZOOM 进出时，两个元素之间没有相互参照的位移。

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

html {
  --top-dis: 10em; /* use variable so only change once in dynamic locations */
}

body {
  height: 2000px;
}

section {
  padding: 60px 0;
  overflow: hidden;
}

#containerScroll {
  position: absolute;
  display: flex;
  top: 0%;
  background-color: #ddd;
  width: 100%;
  height: var(--top-dis);
}

.section-title {
  text-align: center;
  padding-bottom: 30px;
  margin-top:  var(--top-dis);
}

.section-title h2 {
  font-size: 32px;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 20px;
  padding-bottom: 20px;
  position: relative;
  color: #45505b;
}

.section-title h2::before {
  content: '';
  position: absolute;
  display: block;
  width: 120px;
  height: 1px;
  background: #ddd;
  bottom: 1px;
  left: calc(50% - 60px);
}

.section-title h2::after {
  content: '';
  position: absolute;
  display: block;
  width: 40px;
  height: 3px;
  background: #0563bb;
  bottom: 0;
  left: calc(50% - 20px);
}

.first-scroll {
  left: calc(50% - 1em) !important;
  width: 2em;
  height: 2em;
  background-color: transparent;
  z-index: 80;
  bottom: 25px;
  border-width: 0 0.25em 0.25em 0;
  border-style: solid;
  border-color: black;
  position: absolute;
  animation: scrolldown1 1.2s ease-in-out infinite 0.15s;
}

.second-scroll {
  left: calc(50% - 1em) !important;
  width: 2em;
  height: 2em;
  background-color: transparent;
  z-index: 80;
  bottom: 40px;
  position: absolute;
  border-width: 0 0.25em 0.25em 0;
  border-style: solid;
  border-color: black;
  animation: scrolldown1 1.2s ease-in-out infinite;
}

@keyframes scrolldown1 {
  0% {
    transform: translateY(20%) rotate(45deg);
    opacity: 0.7;
  }
  50% {
    transform: translateY(0%) rotate(45deg);
    opacity: 0.2;
  }
  100% {
    transform: translateY(20%) rotate(45deg);
    opacity: 0.7;
  }
}

<div class="section-title">
  <h2>My Story</h2>
  <div id="containerScroll">
    <scroll class="first-scroll"></scroll>
    <scroll class="second-scroll"></scroll>
  </div>
</div>

Answer 3

在 CSS 上，只需将此属性添加到 #containerScroll 位置：

fixed;
left: 50%;
top: 90%; transform: translate(-50%, -50%);