【问题标题】:Grow from center [closed]从中心增长[关闭]
【发布时间】:2018-01-30 06:00:34
【问题描述】:

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

他们表现得很好,但我的目标是让他们从中心成长。关于如何使用 CSS 来做到这一点的任何想法?会不会是定位问题?链接在这里:http://www.catonthecouch.com/feline/

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

【问题讨论】:

  • 我知道你得到了答案。只想说我喜欢您的公司名称和徽标!猫 FTW:D

标签: animation css


【解决方案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/

【讨论】:

  • 在工作演示中(顺便说一句,非常好),你的意思是你的一些过渡是 0.5s 和一些 2.0s 吗?
  • 这不是@den232的意图,它们都应该是0.5
  • 谢谢。我现在明白了。 jb
【解决方案2】:

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

【讨论】:

  • 立即查看。看起来确实好多了,但一开始它会跳。想法?
  • 宾果游戏,放错了。谢谢
  • 您可能还应该保持内容居中。
猜你喜欢
  • 1970-01-01
  • 2020-11-11
  • 1970-01-01
  • 2017-10-23
  • 2021-03-26
  • 2017-07-26
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多