Question

我有div，我使用变换旋转（正在工作）不断旋转。然后，当我将鼠标悬停在旋转div上时，我希望能够缩放div。我无法使其工作，当我移除旋转时它会缩放，但我希望它旋转然后在悬停时缩放。

这是我创建的演示笔:(我使用sass）

<div class="spin">

</div>

.spin {
  height: 50px;
  width: 50px;
  background-color: red;
  -webkit-animation: rotation 7s infinite linear;
  &:hover {
    transform: scale(1.3);
  }
}

@-webkit-keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
  }
}

Answer 1

将其包装在容器div中以在悬停时重新缩放，然后使.spin div 100％
像这样：

HTML：

    .cont {
      height: 50px;
      width: 50px;
    }
    .cont:hover {
      height: 75px;
      width: 75px;
      transition: .5s;
    }
    .spin {
      height: 100%;
      width: 100%;
      background-color: red;
      -webkit-animation: rotation 7s infinite linear;
      &:hover {
        transform: scale(1.3);
      }
    }
    
    @-webkit-keyframes rotation {
      from {
        -webkit-transform: rotate(0deg);
      }
      to {
        -webkit-transform: rotate(359deg);
      }
    }

    <div class="cont">
      <div class="spin">
      
      </div>
    </div>

Answer 2

您可以为包含scale。

的悬停创建新动画

像这样：

@-webkit-keyframes rotationScale {
  from {
    -webkit-transform: rotate(0deg) scale(1.3);
  }
  to {
    -webkit-transform: rotate(359deg) scale(1.3);
  }
}

然后在悬停时使用它：

.spin {
  height: 50px;
  width: 50px;
  background-color: red;
  -webkit-animation: rotation 7s infinite linear;

  &:hover {
    -webkit-animation: rotationScale 7s infinite linear;
  }
}

Answer 3

不添加任何HTML元素或包装器，您可以使用此CSS。并且值得注意的是，过渡效果使其对用户更具视觉吸引力，因为它会在选定的持续时间内发生变化，而不是立即尝试更改。

.spin {
    height: 50px;
    width: 50px;
    background-color: red;
    -webkit-animation: rotation 7s infinite linear;
    transition:height 1.5s, width 1.5s;
    &:hover {
        height:8em;
        width:8em;
    }
}

@-webkit-keyframes rotation {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(359deg);
    }
}

CSS悬停对旋转div的影响

3 个答案: