我正在尝试制作一个圆形div,从div的中心展开以显示内部内容。内部内容不应受到外部div调整大小的影响。
查看jsfiddle:http://jsfiddle.net/tim_m/22bnvLnn/3/ 上面给出的示例的问题是圆圈从左上角扩展而不是从中间向外扩展。内部的内容是好的。使用transform:scale()会使内容变小,但重点是在动画期间揭示而不是增加内容的大小。编辑-Fabio的jsfiddle引导我找到了最接近我要寻找的东西:http://jsfiddle.net/tim_m/wwonzr0u/2/。唯一的问题是在动画期间内容似乎会稍微膨胀。
以下是我的示例代码:
查看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;
}