使用旋轉（45度）將播放的CSS影片置于中心位置-有解無憂

我有以下代碼：

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

最后，輸出如下所示：

使用旋轉（45度）將播放的 CSS 影片置于中心位置

這正是我想要的，因為向下滾動按鈕在文本頂部對齊，我通過設定left: calc(52.3% - 1em) !important;. 在我看來，這個屬性使它在文本頂部完美對齊。

問題是當我縮小時，我得到了這個輸出：

使用旋轉（45度）將播放的 CSS 影片置于中心位置

如您所見，滾動按鈕的對齊方式發生了變化并向右移動，這是因為left: calc(52.3% - 1em) !important;我很確定的屬性。但我不想更改或洗掉此屬性，因為這是使其完美對齊的原因100% zoom。有沒有辦法解決這個問題？例如，當我縮小網站時，滾動按鈕對齊方式不會改變并保持不變？有什么建議？

uj5u.com熱心網友回復：

這真是一部很酷的影片！

為了完美地居中，我進行了以下更改：

這被用來使 div 居中left: calc(52.3% - 1em) !important;；我已經完全洗掉了它，并使用了一個簡單的<center>標簽將其居中。
然后影片代碼本身直接在中心（偏離中心）的右側運行。您可以通過使用將元素向自身左側移動其自身寬度的 50% 來解決此問題translateX(-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>

uj5u.com熱心網友回復：

如果沒有一個完整的片段可以讓人們完全重新創建您的問題，我只能嘗試使用您擁有的代碼重新創建它。

您可以將my-story和containerScroll元素放在部分標題中。然后使containerScroll 位置絕對改變顯示為flex。設定它的頂部位置0并宣告寬度為 100% 和高度為 10em 或您希望它的高度是什么，只需確保my-story元素在其 css 中設定的頂部邊距與來自containerScroll的高度相同。

我已經對此進行了測驗，當我使用 CNTL MOUSE WHEEL放大或縮小時，兩個元素之間沒有相互參照的位移。

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

uj5u.com熱心網友回復：

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

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/399994.html

標籤：javascript html 查询 css

上一篇：如何在影像附近的串列中垂直居中“a”？[復制]

下一篇：試圖使個人資料圖片和文本回應