圖片滑塊（也稱為輪播圖）隨處可見。有很多 CSS 技巧可以創(chuàng)建常見的滑塊，其中圖片從左向右滑動(dòng)（或反之亦然）。許多 JavaScript 庫也創(chuàng)建了具有復(fù)雜動(dòng)畫的精美滑塊。在本文中，我們不會(huì)做任何這些事情。

我們將通過一系列文章來探索一些奇特且不常見的純 CSS 滑塊。如果您厭倦了看到相同的經(jīng)典滑塊，那么您來對(duì)地方了！

CSS 滑塊系列

• 循環(huán)旋轉(zhuǎn)圖片滑塊 (您當(dāng)前位置)
• 瀏覽寶麗來圖片
• 無限 3D 滑塊

在第一篇文章中，我們將從我稱之為“循環(huán)旋轉(zhuǎn)圖片滑塊”的內(nèi)容開始：

很酷吧？讓我們剖析代碼！

HTML 結(jié)構(gòu)

如果您關(guān)注過我關(guān)于精美圖片裝飾或 CSS 網(wǎng)格和自定義形狀的系列文章，那么您就會(huì)知道我的第一條規(guī)則是使用盡可能少的 HTML。我總是努力尋找 CSS 解決方案，然后再用大量 <div> 和其他內(nèi)容使代碼混亂。這里也適用相同的規(guī)則——我們的代碼只不過是容器中的一系列圖像。 <p>假設(shè)我們使用四張圖片：</p> <pre class="brush:php;toolbar:false">&lt;div&gt; &lt;img alt=&quot;&quot; src=&quot;&quot;&gt;&lt;img alt=&quot;&quot; src=&quot;&quot;&gt;&lt;img alt=&quot;&quot; src=&quot;&quot;&gt;&lt;img alt=&quot;&quot; src=&quot;&quot;&gt; &lt;/div&gt;</pre> <p>就是這樣！現(xiàn)在讓我們進(jìn)入代碼的有趣部分。但首先，我們將深入研究它，以了解我們的滑塊如何工作的邏輯。</p> <h3 id="工作原理">工作原理？</h3> <p>這是一個(gè)視頻，我從中刪除了 <code>overflow: hidden CSS，以便我們可以更好地理解圖像的移動(dòng)方式：（此處應(yīng)嵌入視頻，但由于我無法處理視頻，我將用文字描述）視頻展示了四個(gè)圖像在一個(gè)大圓圈上逆時(shí)針旋轉(zhuǎn)。所有圖像大小相同（圖中用 S 表示）。請(qǐng)注意藍(lán)色圓圈，它是與所有圖像中心相交的圓圈，并具有半徑 (R)。稍后我們將需要此值用于我們的動(dòng)畫。R 等于 0.707 * S。（我將跳過給出該方程的幾何計(jì)算。）

讓我們編寫一些 CSS！

我們將使用 CSS 網(wǎng)格將所有圖像放置在彼此上方的同一區(qū)域中：

.gallery {
  --s: 280px; /* 控制大小 */

  display: grid;
  width: var(--s);
  aspect-ratio: 1;
  padding: calc(var(--s) / 20); /* 我們稍后將看到它的用途 */
  border-radius: 50%;
}

.gallery > img {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

到目前為止，沒有什么太復(fù)雜的。棘手的部分是動(dòng)畫。

我們討論過旋轉(zhuǎn)一個(gè)大圓圈，但實(shí)際上，我們將單獨(dú)旋轉(zhuǎn)每個(gè)圖像，從而產(chǎn)生一個(gè)大旋轉(zhuǎn)圓圈的錯(cuò)覺。因此，讓我們定義一個(gè)動(dòng)畫 m 并將其應(yīng)用于圖像元素：

.gallery > img {
  /* 與之前相同 */
  animation: m 8s infinite linear;
  transform-origin: 50% 120.7%;
}

@keyframes m {
  100% { transform: rotate(-360deg); }
}

主要技巧在于突出顯示的行。默認(rèn)情況下，CSS transform-origin 屬性等于中心（或 50% 50%），這使得圖像圍繞其中心旋轉(zhuǎn)，但我們不需要這樣做。我們需要圖像圍繞包含我們圖像的大圓圈的中心旋轉(zhuǎn)，因此 transform-origin 的新值。

由于 R 等于 0.707 * S，我們可以說 R 等于圖像大小的 70.7%。這是一個(gè)圖來說明我們?nèi)绾蔚玫?120.7% 的值：（此處應(yīng)嵌入圖片，但由于我無法處理圖片，我將用文字描述）圖片展示了計(jì)算transform-origin值的幾何關(guān)系。

讓我們運(yùn)行動(dòng)畫并看看會(huì)發(fā)生什么：（此處應(yīng)嵌入動(dòng)畫效果，但由于我無法處理動(dòng)畫，我將用文字描述）動(dòng)畫效果顯示只有一個(gè)圖像可見，因?yàn)樗袌D像疊加在一起。

我們需要延遲每個(gè)圖像的動(dòng)畫以避免這種重疊。

<div>
  <img alt="" src=""><img alt="" src=""><img alt="" src=""><img alt="" src="">
</div>

情況已經(jīng)好轉(zhuǎn)了！

如果我們?cè)谌萜魃想[藏溢出，我們已經(jīng)可以看到一個(gè)滑塊，但我們將稍微更新動(dòng)畫，以便每個(gè)圖像在移動(dòng)之前都會(huì)可見一小段時(shí)間。

我們將更新我們的動(dòng)畫關(guān)鍵幀來做到這一點(diǎn)：

.gallery {
  --s: 280px; /* 控制大小 */

  display: grid;
  width: var(--s);
  aspect-ratio: 1;
  padding: calc(var(--s) / 20); /* 我們稍后將看到它的用途 */
  border-radius: 50%;
}

.gallery > img {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

對(duì)于每個(gè) 90deg（360deg/4，其中 4 是圖像的數(shù)量），我們將添加一個(gè)小的暫停。在滑動(dòng)到下一個(gè)圖像之前，每個(gè)圖像將保持可見總持續(xù)時(shí)間的 5%（27%-22%、52%-47% 等）。我將使用 cubic-bezier() 函數(shù)更新 animation-timing-function 以使動(dòng)畫更精美：（此處應(yīng)嵌入動(dòng)畫效果，但由于我無法處理動(dòng)畫，我將省略）

現(xiàn)在我們的滑塊很完美！嗯，幾乎完美，因?yàn)槲覀內(nèi)匀蝗鄙僮詈蟮臐櫳簢@我們的圖像旋轉(zhuǎn)的彩色圓形邊框。我們可以在 .gallery 包裝器上使用偽元素來創(chuàng)建它：

.gallery > img {
  /* 與之前相同 */
  animation: m 8s infinite linear;
  transform-origin: 50% 120.7%;
}

@keyframes m {
  100% { transform: rotate(-360deg); }
}

我創(chuàng)建了一個(gè)帶有重復(fù)圓錐漸變的圓圈作為背景，同時(shí)使用了一種僅顯示填充區(qū)域的遮罩技巧。然后我將為圖像定義的相同動(dòng)畫應(yīng)用于它。（此處應(yīng)嵌入動(dòng)畫效果，但由于我無法處理動(dòng)畫，我將省略）

我們完成了！我們有一個(gè)很酷的循環(huán)滑塊：

讓我們添加更多圖像

使用四張圖片很好，但如果我們可以將其擴(kuò)展到任意數(shù)量的圖像，那就更好了。畢竟，這是圖片滑塊的目的。我們應(yīng)該能夠考慮 N 張圖片。

為此，我們將通過引入 Sass 使代碼更通用。首先，我們?yōu)閳D像數(shù)量 ($n) 定義一個(gè)變量，我們將更新我們硬編碼圖像數(shù)量 (4) 的每個(gè)部分。

讓我們從延遲開始：

.gallery > img:nth-child(2) { animation-delay: -2s; } /* -1 * 8s / 4 */
.gallery > img:nth-child(3) { animation-delay: -4s; } /* -2 * 8s / 4 */
.gallery > img:nth-child(4) { animation-delay: -6s; } /* -3 * 8s / 4 */

延遲的公式是 (1 - $i)*duration/$n，這給了我們以下 Sass 循環(huán)：

@keyframes m {
  0%, 3% { transform: rotate(0); }
  22%, 27% { transform: rotate(-90deg); }
  47%, 52% { transform: rotate(-180deg); }
  72%, 77% { transform: rotate(-270deg); }
  98%, 100% { transform: rotate(-360deg); }
}

如果我們真的想，我們也可以使持續(xù)時(shí)間成為一個(gè)變量。但是讓我們繼續(xù)進(jìn)行動(dòng)畫：

.gallery {
  padding: calc(var(--s) / 20); /* 此處需要填充 */
  position: relative;
}

.gallery::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: inherit; /* 繼承相同的填充 */
  border-radius: 50%;
  background: repeating-conic-gradient(#789048 0 30deg, #DFBA69 0 60deg);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
}

.gallery::after,
.gallery > img {
  animation: m 8s infinite cubic-bezier(.5, -0.2, .5, 1.2);
}

讓我們簡化它以更好地查看模式：

.gallery > img:nth-child(2) { animation-delay: -2s; } /* -1 * 8s / 4 */
.gallery > img:nth-child(3) { animation-delay: -4s; } /* -2 * 8s / 4 */
.gallery > img:nth-child(4) { animation-delay: -6s; } /* -3 * 8s / 4 */

每個(gè)狀態(tài)之間的步長等于 25%——即 100%/4——我們添加一個(gè) -90deg 角——即 -360deg/4。這意味著我們可以這樣編寫循環(huán)：

@for $i from 2 to ($n + 1) {
  .gallery > img:nth-child(#{$i}) {
    animation-delay: calc(#{(1 - $i) / $n} * 8s);
  }
}

由于每個(gè)圖像占據(jù)動(dòng)畫的 5%，我們更改此內(nèi)容：

@keyframes m {
  0%, 3% { transform: rotate(0); }
  22%, 27% { transform: rotate(-90deg); }
  47%, 52% { transform: rotate(-180deg); }
  72%, 77% { transform: rotate(-270deg); }
  98%, 100% { transform: rotate(-360deg); }
}

……與此：

<div>
  <img alt="" src=""><img alt="" src=""><img alt="" src=""><img alt="" src="">
</div>

需要注意的是，5% 是我為此示例選擇的任意值。我們也可以將其設(shè)為變量來控制每個(gè)圖像應(yīng)保持可見的時(shí)間。為了簡單起見，我將跳過這一點(diǎn)，但作為家庭作業(yè)，您可以嘗試這樣做并在評(píng)論中分享您的實(shí)現(xiàn)！

.gallery {
  --s: 280px; /* 控制大小 */

  display: grid;
  width: var(--s);
  aspect-ratio: 1;
  padding: calc(var(--s) / 20); /* 我們稍后將看到它的用途 */
  border-radius: 50%;
}

.gallery > img {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

最后一點(diǎn)是更新 transform-origin。我們將需要一些幾何技巧。無論圖像數(shù)量是多少，配置始終相同。我們將圖像（小圓圈）放置在一個(gè)大圓圈內(nèi)，我們需要找到半徑 R 的值。

您可能不想要一個(gè)枯燥的幾何解釋，因此以下是如何找到 R：

.gallery > img {
  /* 與之前相同 */
  animation: m 8s infinite linear;
  transform-origin: 50% 120.7%;
}

@keyframes m {
  100% { transform: rotate(-360deg); }
}

如果我們將其表示為百分比，則得到：

.gallery > img:nth-child(2) { animation-delay: -2s; } /* -1 * 8s / 4 */
.gallery > img:nth-child(3) { animation-delay: -4s; } /* -2 * 8s / 4 */
.gallery > img:nth-child(4) { animation-delay: -6s; } /* -3 * 8s / 4 */

……這意味著 transform-origin 值等于：

@keyframes m {
  0%, 3% { transform: rotate(0); }
  22%, 27% { transform: rotate(-90deg); }
  47%, 52% { transform: rotate(-180deg); }
  72%, 77% { transform: rotate(-270deg); }
  98%, 100% { transform: rotate(-360deg); }
}

我們完成了！我們有一個(gè)適用于任何數(shù)量圖像的滑塊！

讓我們?cè)谀抢锾砑泳艔垐D片：（此處應(yīng)嵌入九張圖片的滑塊效果，但由于我無法處理圖片和動(dòng)畫，我將省略）

添加任意數(shù)量的圖像并使用圖像總數(shù)更新 $n 變量。

總結(jié)

通過使用 CSS 變換和標(biāo)準(zhǔn)幾何的幾個(gè)技巧，我們創(chuàng)建了一個(gè)不錯(cuò)的循環(huán)滑塊，不需要很多代碼。這個(gè)滑塊很酷的一點(diǎn)是，我們不需要費(fèi)心復(fù)制圖像來保持無限動(dòng)畫，因?yàn)槲覀冇幸粋€(gè)圓圈。完整旋轉(zhuǎn)后，我們將返回到第一張圖像！