Question

请使用Chrome查看www.mediawiki.org并尝试增加/减少页面缩放（ Ctrl + + / - ）。

任何人都可以提供有关如何实现此类动画缩放处理的指示吗？我注意到它并不适用于所有浏览器。

谢谢！

Answer 1

检查css transition属性

这是来自MediaWIKI网站的一些代码，它使它成为可能：

div#mw-panel div.portal div.body,div#mw-panel div.portal h5 {
    transition:padding-left 250ms;
    -moz-transition:padding-left 250ms;
    -webkit-transition:padding-left 250ms;
    -o-transition:padding-left 250ms;
}

Answer 2

正如anu所说，它是由浏览器处理的，但您可以通过使用百分比和/或ems来实现字体和边距宽度等网站上的实现。

修改 的我没有在Chrome中看到它（即使你说我们应该），因此错过了动画（doh！）。道歉。

Answer 3

我不确定，但我认为你可以通过以em或％格式创建网站来实现同样的效果，只需为父容器宽度和字体属性设置动画......所有子元素都将自动生成动画...

例如......你在body元素上有1em的字体大小，所有的子元素也都有与em格式的body容器字体大小相关的字体大小。当你增加或减少body元素的font-size时，子元素也会增加和减少它的字体大小，当你为body字体设置动画时，子元素也会为它们的字体大小设置动画...

（这是我的想法可能有帮助）...

动画网站缩放/缩放

3 个答案: