HTML, CSS, Javascript 서로 안에 서클 생성하기

Question

HTML, CSS, Javascript로 서클을 만들 필요가 있습니다. 버튼을 클릭하면 다른 서클이 자동으로 추가됩니다. 새로 추가 된 서클은 가장 바깥 쪽 원입니다.

어떻게 할 수 있습니까?

Answer 1

서클의 경우 border-radius를 충분히 큰 값 (보통 가장 큰 너비와 높이의 절반 이상)으로 설정해야합니다.

더 큰 원을 추가하려면 이전 원을 복사하고, 더 크고, 하나 더 만들고, 복사 한 원을 그 안에 붙여 넣어야합니다. 이것은 jQuery 스 니펫이지만 프레임 워크 또는 일반 js를 사용할 수 있습니다.

var $container = $('#container'), 
    $previous_circles = $container.html() 

$container 
    .html('<div class="circle bigger_circle"></div>') 
    .find('.bigger_circle') 
    .append($previous_circles) 
    .end()