Question

我试图从div的中心扩展一个圆形div以显示其中的内容。其中的内容不应受外部div调整大小的影响。

请在此处查看jsfiddle：http://jsfiddle.net/tim_m/22bnvLnn/3/

上面给出的例子的问题是圆圈从左上方扩展而不是从中间扩展。内容很好。使用transform：scale（）会使内容变小，但重点是在动画过程中显示而不是增加内容的大小。

编辑 - Fabio的jsfiddle引导我去了，这是我最接近的人：http://jsfiddle.net/tim_m/wwonzr0u/2/。唯一的问题是动画期间内容似乎会略微膨胀。

这是我的示例代码：

<div class="circle">
    <div class="content">Content</div>
</div>

的CSS：

body {
    padding: 20px;
}

.button {
    border: 1px solid black;
    width: 100px;
    height: 20px;
    text-align: center;
}
.circle,.content {
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 2s ease-in-out;
    -ms-transition: all 2s ease-in-out;
    transition: all 2s ease-in-out;
}

.circle {    
    background: rgba( 99, 99, 99, 0.8 );
    border-radius: 100%;
    color: white;
    text-align: center;
    font-family: sans-serif;
    padding: 20px;
    overflow: hidden;
    width: 100px;
    height: 100px;
    line-height: 400px;
    position: absolute;
    left: 20%;
    top: 20%;
}

.circle.show {
    width: 400px;
    height: 400px;    
    vertical-align: middle;
}

.content {
    width: 400px;
    height: 400px;
    position: absolute;
}

Answer 1

我认为这样做符合你的要求：

.circle {
    ...
    margin-top: 150px;
    margin-left: 150px; 
}

.circle.show {
    width: 400px;
    height: 400px;    
    margin: 0;
}

.content {
    line-height: 100px;    
    position: absolute; 
    width: 100px;
}

.show .content {
    line-height: 400px;
    width: 400px;
}

为了使圆圈保持在同一位置，我增加了一个随着圆圈增长而减少的边距。 .content的行高和宽度使文本在元素增长时保持居中。

Updated JSFiddle

Answer 2

你让我很生气，但是尝试将你的CSS改成这个：

body {
    padding: 20px;
}
.button {
    border: 1px solid black;
    width: 100px;
    height: 20px;
    text-align: center;
}
.circle, .content {
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 2s ease-in-out;
    -ms-transition: all 2s ease-in-out;
    transition: all 2s ease-in-out;
}
.circle {
    background: rgba(99, 99, 99, 0.8);
    border-radius: 100%;
    color: white;
    text-align: center;
    font-family: sans-serif;
    padding: 20px;
    overflow: hidden;
    width: 100px;
    height: 100px;
    line-height: 10px;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    position: relative;
    left: 200px;
    top: 200px;
}
.circle.show {
    -webkit-transform: scale(3);
    -moz-transform: scale(3);
    -o-transform: scale(3);
    -ms-transform: scale(3);
    transform: scale(3);
    z-index:0;
}
.content {
    position: relative;
    transform: translateY(-50%);
    -webkit-transform:translateY(-50%);
    top:50%;
    color:#fff;
    z-index:1;
}
.show .content {
    transform: scale(1);
}

See fiddle here

动画/从中心显示内容

2 个答案: