卡卡網(wǎng)

那些從左到右或從右到左的圖像輪播效果你或許見(jiàn)多了，今天介紹一個(gè)不一樣的輪播效果，那就是圓形旋轉(zhuǎn)圖像滑塊。

demodownload

這個(gè)圓形旋轉(zhuǎn)圖像滑塊的效果，看起來(lái)是不是挺酷的？然而它是由純CSS創(chuàng)建的，并且代碼很少，一點(diǎn)JavaScript腳本都不用到。

下面我們分析一下主要代碼。

HTML代碼

假設(shè)我們正在處理四張圖片：

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

代碼很少，代碼只不過(guò)是容器中的圖像列表。

CSS代碼

使用CSS Grid將所有圖像放置在彼此上方的同一區(qū)域中：

.gallery  {
  --s: 280px; /* control the size */

  display: grid;
  width: var(--s);
  aspect-ratio: 1;
  padding: calc(var(--s) / 20); /* we will see the utility of this later */
  border-radius: 50%;
}
.gallery > img {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

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

.gallery > img {
  /* same as before */
  animation: m 8s infinite linear;
  transform-origin: 50% 120.7%;
}

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

主要技巧依賴于突出顯示的行。默認(rèn)情況下，CSS transform-origin屬性等于center（或50% 50%）使圖像圍繞其中心旋轉(zhuǎn)，但這里不需要它來(lái)執(zhí)行此操作。我們需要圖像圍繞包含我們圖像的大圓的中心旋轉(zhuǎn)，因此使用transform-origin的新值。

由于 R 等于0.707 * S，我們可以說(shuō)R等于70.7%圖像大小。這里有一個(gè)圖來(lái)說(shuō)明我們是如何得到這個(gè)120.7%值的：

讓我們運(yùn)行動(dòng)畫看看會(huì)發(fā)生什么：

因?yàn)槲覀儼阉袌D片堆疊在一起，同時(shí)旋轉(zhuǎn)，只有頂部圖像是可見(jiàn)的。我們需要的是延遲每個(gè)圖像的動(dòng)畫以避免這種重疊。

.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 */

再看看動(dòng)畫效果：

如果我們隱藏容器上的溢出，我們已經(jīng)可以看到一個(gè)滑塊，但我們將稍微更新動(dòng)畫，以便每個(gè)圖像在移動(dòng)之前在短時(shí)間內(nèi)保持可見(jiàn)。

我們將更新我們的動(dòng)畫關(guān)鍵幀來(lái)做到這一點(diǎ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); }
}

對(duì)于每個(gè)90deg（360deg/4，其中4圖像的數(shù)量），我們將添加一個(gè)小的停頓。在我們滑動(dòng)到下一個(gè)圖像（27%-22%、52%-47%等）5%之前，每個(gè)圖像將在整個(gè)持續(xù)時(shí)間內(nèi)保持可見(jiàn)。我將更新使用函數(shù)cubic-bezier()使動(dòng)畫更漂亮：

現(xiàn)在我們的滑塊完美了！最后添加潤(rùn)色：圍繞我們的圖像旋轉(zhuǎn)的彩色圓形邊框。我們可以在.gallery包裝器上使用偽元素來(lái)制作它：

.gallery {
  padding: calc(var(--s) / 20); /* the padding is needed here */
  position: relative;
}
.gallery::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: inherit; /* Inherits the same padding */
  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);
}

這樣，一個(gè)很酷的圓形滑塊就制作完了。

demodownload

適用于任意數(shù)量圖像的滑塊

上面實(shí)例使用四張圖像，但如果我們可以用任意數(shù)量的圖像會(huì)更好，也更符合實(shí)際使用需求。我們應(yīng)該考慮N張圖像。

下面是一個(gè)適用任意數(shù)量圖像的SCSS代碼。

@use 'sass:math';

$n:5; /* 這里自定義圖像數(shù)量，把5改為你的圖像數(shù)目 */

.gallery  {
  --s: 280px; /* 控制大小 */
  --d: 8s; /* 動(dòng)畫延遲 */
  
  display: grid;
  width: var(--s);
  aspect-ratio: 1;
  overflow: hidden;
  padding: calc(var(--s)/20);
  border-radius: 50%;
  position: relative;
  clip-path: circle(49.5%); /* 避免由 overflow: hidden 造成的差錯(cuò)*/
}
.gallery::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: inherit;
  border-radius: inherit;
  background: repeating-conic-gradient(#789048 0 30deg,#DFBA69 0 60deg);
  -webkit-mask: 
     linear-gradient(#fff 0 0) content-box, 
     linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
.gallery > img {
  grid-area: 1/1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  transform-origin: 50% (50%/math.sin(180deg/$n) + 50%);
}
.gallery::after,
.gallery > img {
  animation: m var(--d) infinite cubic-bezier(.5,-0.2,.5,1.2);
}
@for $i from 2 to ($n + 1) {
  .gallery > img:nth-child(#{$i}) {
    animation-delay: calc(#{(1 - $i)/$n}*var(--d));
  }
}

@keyframes m {
  0%,3%    {transform: rotate(0)}
  @for $i from 1 to $n {
    #{($i/$n)*100 - 2}%,#{($i/$n)*100 + 3}% {transform: rotate(#{($i/$n)*-360}deg)}  
  }
  98%,100% {transform: rotate(-360deg)}
}


body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
  background: #C2CBCE;
}

請(qǐng)注意，此代碼為SCSS而非CSS，我們要把該代碼編譯成CSS后才能用于HTML文檔里。

下面是編譯該SCSS代碼為CSS的方法介紹。

1、打開(kāi)在線編譯器：https://codepen.io/pen/

2、把上面SCSS代碼復(fù)制到CSS編輯窗口。

3、點(diǎn)擊CSS編輯窗口右上方的齒輪圖標(biāo)，選擇“CSS Preprocessor”為SCSS，然后點(diǎn)“x”關(guān)閉設(shè)置。

 4、點(diǎn)擊CSS編輯器右上角的箭頭，在下拉菜單點(diǎn)擊“View Compiled CSS”，這時(shí)，SCSS代碼立即被編譯為CSS代碼，我們把這些CSS代碼復(fù)制到HTML文檔里使用即可。

SCSS編譯成CSS后的代碼。

總結(jié)

本文介紹了如何使用純CSS創(chuàng)建圓形旋轉(zhuǎn)圖像滑塊(輪播)，喜歡的朋友可以收藏本頁(yè)，或下載源代碼直接使用。

相關(guān)文章

• CSS 3D 隨機(jī)立方體滑塊【演示/代碼下載】
• CSS 3D立方滑塊，垂直和水平無(wú)限循環(huán)滾動(dòng)
• CSS 3D滑塊動(dòng)畫效果(水平或垂直方向無(wú)限循環(huán)滾動(dòng))
• [示例詳解]用HTML + CSS創(chuàng)建可拖動(dòng)的范圍滑塊(Range Slider)
• CSS+JS實(shí)現(xiàn)的顏色漸變可拖動(dòng)滑塊

標(biāo)簽: 滑塊  圖像滑塊  css  輪播