아이콘 원에 원형 선 삽입

원형 아이콘 홀더를 만들려고합니다. 모든 것이 완벽하게 작동하지만 원을 만들기 위해 모든 아이콘을 연결하는 원형 선을 추가하고 싶습니다. 여기 내가 여기 아이콘 원에 원형 선 삽입

내가 현재 여기

내가

<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

출처

2017-05-05 t.i.rony

SVG에서이 문제를 조사해 보셨습니까? – Manngo

SVG를 사용하고 있지 않다면, 최상위 이미지와 이미지 맵핑을 사용하면됩니다. –

@GaryHayes OP는 또한 바이올린 당 동적 효과를 원합니다. – Manngo

이 것 거의 나는 당신이 원하는 무슨 생각을 당신을 얻을 :

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

당신은 실제 크기로 더 많은 실험을해야합니다. 실제 아이콘이 원 앞에 오도록 z-index 값을 추가해야합니다.

출처

2017-05-05 06:54:01 Manngo

그것이 저에게 효과적입니다. 그건 쉬운 감사 였어. 이 유형의 cicular 아이콘을 만들 수있는 더 좋은 해결책이 있습니까? 다시 한 번 감사드립니다. –

원을 만들지 않고 기존 이미지의 UL을 오버랩하면 찾고있는 것을 해결할 수 있습니다. ?

출처

2017-05-05 06:48:14

아이콘 원에 원형 선 삽입

답변

관련 문제