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()