将圆形线插入图标圈

Question

我正在尝试创建一个圆形图标持有人。一切都很完美，但我想添加一个圆形线，将所有图标连接起来创建一个圆圈。 这就是我想要的

这是我目前拥有的

以下是我正在使用的代码

<div class="three60_wrapper clearfix">


    <ul>
        <li><img src="image url" alt="logo"></li>
        <li><a href=""><img src="image url" alt="360 icon"></a>
        </li>
        <li><a href=""><img src="image url" alt="360 icon"></a>
        </li>
        <li><a href=""><img src="image url" alt="360 icon"></a>
        </li>
        <li><a href=""><img src="image url" alt="360 icon"></a>
        </li>
        <li><a href=""><img src="image url" alt="360 icon"></a>
        </li>
        <li><a href=""><img src="image url" alt="360 icon"></a>
        </li>
        <li><a href=""><img src="image url" alt="360 icon"></a>
        </li>


    </ul>


</div>


.three60_wrapper ul {


    list-style-type: none; 
    padding: 0; position: relative; 

}
.three60_wrapper li {
    position: absolute;
    -webkit-transition: all 2s linear;
    -moz-transition: all 2s linear;
    transition: all 2s linear;
}

.three60_wrapper li a{ display: block;
}
.three60_wrapper li img{ display: block; min-width: 130px; height: auto; max-width: 180px;}




jQuery(function() {

    var type = 1, //circle type - 1 whole, 0.5 half, 0.25 quarter
    radius = '20em', //distance from center
    start = -90, //shift start from 0
    $elements = jQuery('.three60_wrapper ul li:not(:first-child)'),
    numberOfElements = (type === 1) ?  $elements.length : $elements.length - 1, //adj for even distro of elements when not full circle
    slice = 360 * type / numberOfElements;

$elements.each(function(i) {
    var $self = jQuery(this),
        rotate = slice * i + start,
        rotateReverse = rotate * -1; 

    $self.css({
        'transform': 'rotate(' + rotate + 'deg) translate(' + radius + ') rotate(' + rotateReverse + 'deg)'
    });
}); 


});

它基于此 jsfiddle

Answer 1

不会创建一个圆圈并重叠现有的UL图像来解决您的需求吗？

Answer 2

这将几乎为您提供我想要的内容：

li:first-child {
    border: medium solid red;
    width: 24em;
    height: 24em;
    margin-left: -10em;
    margin-top: -10em;
    border-radius: 50%;
}

您需要更多地了解实际尺寸。您还需要添加z-index值，以确保实际图标位于圆圈前面。