Question

我是网页设计的新手。很新。我需要一些-webkit-transitions的帮助。有没有办法可以做到这一点，以便巫婆盒子过渡总是保持在其他盒子的顶部。类似于悬停在左侧框上时发生的效果。

<body>
<p>Test</p>
<div class="container">
    <div class="box">
        <h2>headline</h2>
        <p>test content</p>
    </div>
    <div class="box">
        <h2>headline</h2>
        <p>test content</p>
    </div>
</div>
<p>Test</p>

http://jsfiddle.net/25z7qj5d/3/

Answer 1

这有点问题，因为元素的位置会移动而你正在盘旋它们，因此难以维持悬停。你选择的速度在这里有所帮助。

坦率地说，悬停可能更适合用JS / JQ切换类，但实际的重新排序可以用flexbox完成。

.container {
  width: 75%;
  margin: 10px auto;
  border: 1px solid green;
  display: flex;
  flex-wrap: wrap;
}
.box {
  order: 2;
  border-radius: 25px;
  display: inline-block;
  width: 15%;
  height: 20%;
  margin: 1%;
  color: aquamarine;
  text-align: center;
  background: black;
  -webkit-transition: width 2s;
  transition: width 2s;
}
.box:hover {
  order: 1;
  width: 100%;
  height: 40%;
}

<div class="container">
  <div class="box">
    <h2>FIRST</h2>

    <p>test content</p>
  </div>
  <div class="box">
    <h2>SECOND</h2>

    <p>test content</p>
  </div>
  <div class="box">
    <h2>THIRD</h2>

    <p>test content</p>
  </div>
</div>

Codepen Demo

Answer 2

这是 -

.animate.move {
  top: 100%;
  margin-top: -100px; /*.animate width*/
}

请查看fiddle以便更好地理解..

CSS过渡定位

2 个答案: