CSS 过渡 : move to the right

Question

我必须制作一个响应式网站，当我将浏览器缩小到指定大小时，我希望左侧的 Logo 移动到右侧，以便它位于中心。

这是 transition 的示例我想实现。它在“2.Animating your transitions”框下1

我知道过渡在悬停时开始，但是否可以在调整浏览器大小时激活它？还是任何替代方法？

Answer 1

您可以通过混合使用 CSS3 转换和@media 查询来实现这一点。

div
{
  height: 100px;
  width: 200px;
  position: relative;
  background-color: #eee;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  -ms-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

@media all and (min-width: 400px) {
  div
  {
    background-color: #fc3;
    left: 100px;
  }
}

它所做的是在具有相对位置的元素上设置过渡，但显然不会触发它们(因为没有 :hover 或其他选择器)并声明位置更改(left: 100px;) 当浏览器宽度超过 400px 时。使用 max-width 表示“超过”值。

显然您需要将值更改为您需要的值，但这是应该如何完成的。

http://jsfiddle.net/AvhvD/