从中心制作内容动画/显示内容

Animate / Reveal Content From Center

本文关键字：动画 显示      更新时间：2023-09-26

我正试图使一个圆形div从div的中心展开，以显示其中的内容。内部内容不应受到外部分区大小调整的影响。

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

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

编辑-法比奥的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;
}

我认为这符合您的要求：

.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的行高和宽度使文本随着元素的增长而居中。

更新的JSFiddle

你用这个让我汗流浃背，但试着把你的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);
}

请参阅此处的小提琴

相关文章：