Question

使用：hover应用转换时，如何使li元素不移动？通过将高度和边界半径应用于li元素来制作圆圈。我曾尝试使ul容器更大，但这似乎没有用。谢谢你的帮助。

代码：

 body {}
    main {
      display: flex;
      background: #eeeeee;
      min-height: 100vh;
      padding: 1em;
      
    }

    h1 {
      font-family: arial;
      font-size: 1.4em;
      padding-left: 1em;
    }

    ul {
      padding-top:50px;
      min-height: 600px;
      position:relative;

    }

    li {
      position:relative;
      background-color: purple;
      border-radius: 50%;
      width: 50px;
      height: 50px;
      padding: 1em;
      text-align: center;
      list-style: none;
      display: inline-block;
      line-height: 50px;
      border: 5px solid red;
      margin-right: -1em;
      z-index: 0;
      transition: width 0.5s, height 0.5s, background-color 1s, line-height 0.5s;
      
    }

    li:hover {
      display: inline-block;
      position:relative;
      width: 90px;
      height: 90px;
      z-index: 10;
      background-color: green;
      line-height: 90px;
    }

<body>
  <main>
    <h1>
      My animated Menu
    </h1>
    <div class="menu">
      <ul>
        <li>X</li>
        <li>Y</li>
        <li>Z</li>
      </ul>
    </div>
  </main>
</body>

Answer 1

使用CSS3 transforms，这样元素可以自由移动或缩放到DOM中，而不会影响布局大小。

一个不错的好处：由于不会在每帧上重新计算布局（将使用GPU），因此动画在fps方面将更加高效。

ul {
  padding-top: 50px;
}

li {
  background-color: purple;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  padding: 1em;
  text-align: center;
  list-style: none;
  display: inline-block;
  line-height: 50px;
  border: 5px solid red;
  margin-right: -1em;
  z-index: 0;
  transition: transform 0.5s, background-color 1s;
}

li:hover {
  display: inline-block;
  position: relative;
  transform: scale(1.5);
  z-index: 10;
  background-color: green;
}

<div class="menu">
  <ul>
    <li>X</li>
    <li>Y</li>
    <li>Z</li>
  </ul>
</div>

在悬停时使用过渡时如何使元素保留在原位

1 个答案: