卡卡網(wǎng)

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

demodownload

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

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

HTML代碼

假設我們正在處理四張圖片：

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

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

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

動畫顯示旋轉一個大圓圈，但實際上，是單獨旋轉每個圖像，從而產(chǎn)生一個大旋轉圓圈的錯覺。因此，我們定義一個動畫m，并將其應用于圖像元素：

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

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

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

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

讓我們運行動畫看看會發(fā)生什么：

因為我們把所有圖片堆疊在一起，同時旋轉，只有頂部圖像是可見的。我們需要的是延遲每個圖像的動畫以避免這種重疊。

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

再看看動畫效果：

如果我們隱藏容器上的溢出，我們已經(jīng)可以看到一個滑塊，但我們將稍微更新動畫，以便每個圖像在移動之前在短時間內(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); }
}

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

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

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

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

demodownload

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

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

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

@use 'sass:math';

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

.gallery  {
  --s: 280px; /* 控制大小 */
  --d: 8s; /* 動畫延遲 */
  
  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 造成的差錯*/
}
.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;
}

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

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

1、打開在線編譯器：https://codepen.io/pen/

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

3、點擊CSS編輯窗口右上方的齒輪圖標，選擇“CSS Preprocessor”為SCSS，然后點“x”關閉設置。

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

SCSS編譯成CSS后的代碼。

總結

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

相關文章

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

標簽: 滑塊  圖像滑塊  css  輪播