首頁 > web前端 > css教學 > 如何將可點擊的圖像排列在中心圖像周圍的圓圈中?

如何將可點擊的圖像排列在中心圖像周圍的圓圈中?

DDD
發布: 2024-12-10 17:59:15
原創
813 人瀏覽過

How to Arrange Clickable Images in a Circle Around a Center Image?

將圖示放置到圓圈

問題:

如何在一個影像中放置多個圖像圍繞另一張圖像圈出,使它們全部可點擊連結?

答案:

解1(現代化)

使用HTML、CSS 和JavaScript:

  1. 使用HTML、CSS 和JavaScript:
  2. >
  3. 根據影像連結產生HTML數組。
使用 CSS 將圖片定位在容器內的圓圈上。

根據圓圈半徑和圖像大小調整容器大小。

解決方案2(舊)
  1. 使用 CSS變換:
  2. 為圓形容器建立包裝器 div。
將影像絕對放置在包裝器的中心。

應用鍊式 CSS 變換來旋轉和平移圖像到所需的角度。

.circle-container {
  width: 24em;
  height: 24em;
  position: relative;
}

.circle-container a {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.deg0 img {
  transform: rotate(0deg);
}

.deg45 img {
  transform: rotate(45deg);
}

.deg90 img {
  transform: rotate(90deg);
}
登入後複製
程式碼片段:

以上是如何將可點擊的圖像排列在中心圖像周圍的圓圈中?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板