从中心开始增长

Question

我一直在尝试让底部的圆圈在Firefox中增长(需要添加其他前缀，仍在开发中)

他们行为正常，但我的目标是让他们从中心成长起来。关于如何使用CSS来做这件事，有什么想法吗？这会是一个定位的问题吗？链接在这里：http://www.catonthecouch.com/feline/

我只是简单地在鼠标悬停时增加宽度/高度。

Answer 1

添加等于大小更改的一半的负左边距和上边距(-15px)

Answer 2

如果使用的是CSS3，则可以使用属性转换并缩放元素。

Obs:为了避免太多代码，我省略了前缀，但您应该使用它们。

.circle {
    width: 500px;
    height: 500px;
    border-radius: 100%;
    transform: scale(0.1); /* 1/10 of the original size */
    transition: all 1s ease-in-out;
}
.circle.opened {
    transform: scale(1);
}

工作演示：http://jsfiddle.net/JCMais/eKs59/