Question

我正在开发一个快速响应的网站，我看不到网络上的任何内容。

我正在尝试为其初始设置为自动边距的图像设置动画，然后将其设置为特定位置（即：margin-top：4px＆amp; margin-left：30px）。由于边距设置为自动，我所做的任何事情都会让它移动跳跃 - 但是图像需要在水平方向中间响应，以便移动设备作为其初始状态并平滑地制作动画。

HTML：

<div class="logoWrapper">
    <img class="logo" src="some.png"/>
</div>

CSS：

.logo {
    display: block;
    width: 90px;
    height: 90px;
    margin-top: 90px;
    margin-left: auto;
    margin-right: auto;
    z-index: 14;
    -webkit-transition: all .8s ease;
    -moz-transition: all .8s ease;
    -ms-transition: all .8s ease;
    -o-transition: all .8s ease;
}
.logoShrink {
    margin-top: 4px;
    width: 20px;
    height: 20px;
}
.logoWrapper {
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 15;
}

jQuery的：

jQuery('.logo').addClass('logoShrink');

我知道这对许多人来说是一个问题，但我找不到任何可行的东西;让我们在这里获得真正的解决方案。任何帮助将不胜感激。日Thnx !!

Answer 1

我建议将图像置于中心位置：绝对和左：50％和左边距：-50％。可以这样做，因为它的父级是位置：固定。

.logo {
    display: block;
    position: absolute;
    width: 90px;
    height: 90px;
    margin-left: -45px;
    left: 50%;
    top: 90px;
    z-index: 14;
    -webkit-transition: all .8s ease;
    -moz-transition: all .8s ease;
    -ms-transition: all .8s ease;
    -o-transition: all .8s ease;
}

之后，向左，向左和向左边缘转换将完成您想要的操作。

如何从边距移动图像：自动？

1 个答案: