1

eu to tentando criar um circulo com barras dentro que acompanha a borda do circulo, eu estou a horas quebrando cabeça com isso.

Aqui tem o código que eu levei o dia todo pra fazer, mas ainda não é isso,

$(function(){
		var left = 50, 
			rotate = 0,
			top = 0,
			tX = 0,
			tY = 100;
		for (var i = 0; i <= 32; i++) {
			var li = $('<li>',{class:'bar_'+i});
			li.css({
				'left': left+'%',
				'top': '0',
				'transform': "translateY(-"+tY+"%) translateX("+tX+"px) rotate("+rotate+"deg)",
				'margin-top':top
			});
			top +=  5.46875;
			rotate += 2.8125;
			left += 1.5625;
			tX += 1.5625;
			tY -= 1.5625;
			$('.circle').append(li);
		}

	})
ul.circle { width: 310px; height: 350px; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #aaa;
	border-radius: 100%; }
	ul.circle li { position: absolute; width: 3px; height: 100px; background-color: #60f; list-style: none; box-sizing: border-box;
	border: none; margin-left: -1.5px;  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="circle">			
			
</ul>

Aqui o código

Eu quero que a barra roxa siga a borda do circulo ... ta tentei de tudo, até pensei em fazer tudo só no css, mas eu vou utilizar 128 barras dessa, então estilizar 128 barras n vai da certo kkk, fico no aguardo, abraço!

7
  • Porque você quer fazer isso utilizando <ul> e <li> ? Commented 16/02/2018 às 21:24
  • na vdd não tem um porque, só achei melhor utilizar ambos pra manipular a <li> com jquery Commented 16/02/2018 às 21:25
  • Não entendi o modo que vc quer que as barras acompanhem o círculo.
    – Sam
    Commented 16/02/2018 às 21:27
  • Cara, o que eu quero fazer é tipo isso: prntscr.com/ifsf6k, Commented 16/02/2018 às 21:29
  • Só que em html, jquery e css, eu sei que é possível, mas ainda n descobri como, ja rodei a net toda atras de algo que me ajudasse, mas n achei nada Commented 16/02/2018 às 21:30

1 Resposta 1

0

Você pode conseguir o efeito usando transform-origin: bottom; e um pseudo-elemento.

Suponhamos que tenha apenas 1 barra no círculo, com altura de metade do raio + 2%, totalizando 52% (os 2% será o excesso que irá ficar fora do círculo) posicionado no meio com a ponta de baixo saindo do centro:

inserir a descrição da imagem aqui

Gerar as várias barras fazendo a inclinação pela ponta de baixo:

inserir a descrição da imagem aqui

Você conseguirá obter o efeito. Porém não use ul nem li para isso. Esses elementos possuem um espaçamento padrão que irá atrapalhar. Mesmo você podendo eliminar esses espaçamentos pelo CSS, é desnecessário. Use div e span, seu código vai ficar muito mais limpo e preciso.

Outro ponto é que você precisará de 128 barras para completar o círculo com a rotação especificada no jQuery.

Veja:

$(function(){
   var rotate = 0;
   for (var i = 0; i <= 128; i++) {
      var li = $('<span>',{class:'bar_'+i});
      li.css('transform','rotate('+rotate+'deg)');
      rotate += 2.8125;
      $('.circle').append(li);
   }
})
div.circle {
   width: 350px;
   height: 350px;
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

div.circle::after {
   content: '';
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   background-color: #aaa;
	border-radius: 100%;
}

div.circle span {
   position: absolute;
   width: 3px;
   height: 52%;
   background-color: #60f;
   left: 50%;
   margin-left: -1.5px;
   transform-origin: bottom;
   top: -2%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="circle">
</div>

1
  • CARA QUE PERFEITO, era isso que eu tava tentando fazer, muito obrigado mesmo! Commented 16/02/2018 às 23:06

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .