从中心成长

Question

我一直在尝试让底部圈子在Firefox中增长（需要添加其他前缀，仍然在开发中）

他们行为正常，但我的目标是让他们从中心成长。关于我如何使用CSS来做到这一点的任何想法？它会是一个定位的东西吗？链接位于：http://www.catonthecouch.com/feline/

我只是在悬停时增加宽度/高度。

Answer 1

如果您使用的是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/

Answer 2

添加负左和上边距等于大小变化的一半（-15px）