需要CSS帮助，我需要将循环div堆叠在彼此下面_Css

需要CSS帮助，我需要将循环div堆叠在彼此下面

css

需要CSS帮助，我需要将循环div堆叠在彼此下面,css,Css,我有一个带有css的循环div，它可以在mousover上扩展。我不知道如何开始让另一个更大的圆圈坐在它后面，中心点相同。这可以在第一个圆周围创建一个环 e、 g.每个绿色环代表下一个圆的外侧（共3个圆）图像示例我想我解释得不太清楚！：/很抱歉我需要分开的div，而不是一个可以构成外圈的div 这是我目前的代码： #圆圈 { 右边距：自动；左边距：自动；宽度：800px；高度：800px；校准调整：中央； } .圆圈1 {位置：相对位置；利润率最高：50%；右边距：自动；左边

我有一个带有css的循环div，它可以在mousover上扩展。我不知道如何开始让另一个更大的圆圈坐在它后面，中心点相同。这可以在第一个圆周围创建一个环

e、 g.每个绿色环代表下一个圆的外侧（共3个圆）

图像示例

我想我解释得不太清楚！：/很抱歉我需要分开的div，而不是一个可以构成外圈的div

这是我目前的代码：

#圆圈
{
右边距：自动；
左边距：自动；
宽度：800px；
高度：800px；
校准调整：中央；
}
.圆圈1
{位置：相对位置；
利润率最高：50%；
右边距：自动；
左边距：自动；
宽度：100px；
高度：100px；
边界半径：50%；
背景：#ff3019；/*旧浏览器*/
背景：-moz线性梯度（顶部，#ff3019 0%，#cf0404 100%）；/*FF3.6+*/
背景：-webkit渐变（线性、左上、左下、颜色停止（0%、#ff3019）、颜色停止（100%、#cf0404））；/*铬、Safari4+*/
背景：-webkit线性梯度（顶部，#ff3019 0%，#cf0404 100%）；/*Chrome10+，Safari5.1+*/
背景：-o型线性梯度（顶部，#ff3019 0%，#cf0404 100%）；/*Opera 11.10+*/
背景：-ms线性梯度（顶部，#ff3019 0%，#cf0404 100%）；/*IE10+*/
背景：线性梯度（至底部，#ff3019 0%，#cf0404 100%）；/*W3C*/
过渡：1s；
-moz转换：1s；/*Firefox 4*/
-webkit转换：1s；/*Safari和Chrome*/
-o型转换：1s；/*Opera*/
-ms转换：1s；/*IE9（可能）*/
}

类似的东西

@GCyrillus已嵌套我有单独的div

<!doctype html>
<html>
 <head>
  <meta charset="utf-8">
  <title>circles</title>
  <style>
   html,body{margin:0;padding:0;}
   body>div>div{
    position:fixed;
    border-radius:100%;
    border:1px solid rgba(0, 0, 0, 0.5);
    width:250px;
    height:250px;
    -webkit-transition:all 1200ms ease;
   }
   body>div>div:nth-child(1){-webkit-transform:scale(0.3);}
   body>div>div:nth-child(2){-webkit-transform:scale(0.3);}
   body>div>div:nth-child(3){-webkit-transform:scale(0.3);}
   body>div:hover>div:nth-child(1){-webkit-transform:scale(1);}
   body>div:hover>div:nth-child(2){-webkit-transform:scale(0.8);}
   body>div:hover>div:nth-child(3){-webkit-transform:scale(0.6);}
  </style>
 </head>
 <body>
  <div>
   <div></div>
   <div></div>
   <div></div>
  </div>
 </body>
</html>


圈子
html，正文{边距：0；填充：0；}
正文>div>div{
位置：固定；
边界半径：100%；
边框：1px实心rgba（0,0,0,0.5）；
宽度：250px；
高度：250px；
-webkit转换：所有1200ms的易用性；
}
body>div>div:n个子（1）{-webkit变换：比例（0.3）；}
body>div>div:n个子（2）{-webkit变换：比例（0.3）；}
body>div>div:n个子（3）{-webkit变换：比例（0.3）；}
body>div:hover>div:n子级（1）{-webkit变换：缩放（1）；}
body>div:hover>div:n子级（2）{-webkit变换：比例（0.8）；}
body>div:hover>div:n子级（3）{-webkit变换：比例（0.6）；}

你的意思是想让它们在悬停状态下生长，就像水中的圆圈一样？

带填充的嵌套div应该完成此操作或跨越

div {
    min-height:1em;
    min-width:1em;
    margin:0;
    box-shadow:inset 0 0 0 1px;
    border-radius:100%;
    transition:1s;
    display:inline-block;
    vertical-align:top;
    text-align:center;line-height:0.8em;text-shadow:0 0 5px
}
div:hover, div:hover div {
    padding:3em;
    transition:1s;
}

您需要根据圆的半径调整每个圆环的顶部/左侧。e、 g.如果红点在100100，第一个小圆的半径为10，那么它的顶部/左侧需要是90,90，然后是80,80，然后是70,70，等等…HTML/JS？你能用你拥有的东西制作一个JSFIDLE吗？你考虑过用SVG或画布吗？同样的，还有更多的框阴影
   <div id="ring" title="rings in water"">
        <div>
            <div>
                <div>
                    <div>
                        <div>
                            <div>
                                <div id="stone"> o </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>