一尘不染

将图标放置到圆圈中

css

如何将几个元素放置在另一个元素周围的圆中,并使这些元素也都可单击链接?我希望它看起来像下面的图片,但是我不知道如何实现这种效果。

这有可能吗?


阅读 385

收藏
2020-05-16

共1个答案

一尘不染

是的,仅使用CSS很有可能而且非常简单。您只需要
清楚要与图像链接的角度即可
(我在末尾添加了一段代码,用于在
您悬停其中一个角度时显示它们)。

演示
您首先需要一个包装器。我将其直径设置为24em(width: 24em; height: 24em;这样做),您可以将其设置为任何所需的直径。你给它
position: relative;。

然后,将带有图像的链接
水平和垂直放置在该包装的中心。你这样做,通过设置position: absolute;,然后top: 50%; left: 50%;与margin: -2em;(其中2em一半的与图像,我已经设置为链接的宽度4em-再次,你可以
改变它到任何你想要的,但不要忘了改利润率这种情况)。

然后,确定要与图像建立链接的角度,然后添加一个类deg{desired_angle}(例如deg0或之类的deg45东西)。然后,对每个这样的类应用链式CSS转换,如下所示:

.deg{desired_angle} {
   transform: rotate({desired_angle}) translate(12em) rotate(-{desired_angle});
}

{desired_angle}用0,替换的地方45,依此类推…

第一个旋转变换使对象及其轴旋转,平移变换沿旋转的X轴平移对象,第二个旋转换将对象带回到位置演示中,以演示其工作原理。

这种方法的优点是它很灵活。您可以以不同角度添加新图像,而无需更改当前结构。

代码片段

    .circle-container {

        position: relative;

        width: 24em;

        height: 24em;

        padding: 2.8em;

        /*2.8em = 2em*1.4 (2em = half the width of a link with img, 1.4 = sqrt(2))*/

        border: dashed 1px;

        border-radius: 50%;

        margin: 1.75em auto 0;

    }

    .circle-container a {

        display: block;

        position: absolute;

        top: 50%; left: 50%;

        width: 4em; height: 4em;

        margin: -2em;

    }

    .circle-container img { display: block; width: 100%; }

    .deg0 { transform: translate(12em); } /* 12em = half the width of the wrapper */

    .deg45 { transform: rotate(45deg) translate(12em) rotate(-45deg); }

    .deg135 { transform: rotate(135deg) translate(12em) rotate(-135deg); }

    .deg180 { transform: translate(-12em); }

    .deg225 { transform: rotate(225deg) translate(12em) rotate(-225deg); }

    .deg315 { transform: rotate(315deg) translate(12em) rotate(-315deg); }


    <div class='circle-container'>

        <a href='#' class='center'><img src='image.jpg'></a>

        <a href='#' class='deg0'><img src='image.jpg'></a>

        <a href='#' class='deg45'><img src='image.jpg'></a>

        <a href='#' class='deg135'><img src='image.jpg'></a>

        <a href='#' class='deg180'><img src='image.jpg'></a>

        <a href='#' class='deg225'><img src='image.jpg'></a>

        <a href='#' class='deg315'><img src='image.jpg'></a>

    </div>

另外,您可以通过使用链接的背景图像而不是使用img标签来进一步简化HTML 。

2020-05-16