Question

嗨，我只是一名学生，我只想知道是否可以通过使用css来组合悬停，转换和转换。当徘徊时，变换后的图像如何转变回原始尺寸和形状？

<html>
    <style>
      .sample {
          display: inline-block;
          border: 0px solid #fff;
          margin: 10px;
          overflow: hidden;
          height: 500px;
          width: 140px;
          transform: rotate(0deg);
          webkit-transition: 0.8s;
          transition: 0.7s;
      }
      .sample img {
          display: block;
          transform: rotate(2deg);
          transform-origin: 200% -600%;
      }
      .sample img:hover {
          width: 600px;
          height: 600px;
          transform: rotate(0deg);
          transform-origin: 0% 0%;
          -webkit-transition-timing-function: ease-in-out;
      }
  </style>
  <body>
      <div class="sample">
          <img src="http://www.freegreatpicture.com/files/39/1264-tree.jpg" height="600" width="600">
      </div>
  </body>
</html>

Answer 1

如果您只在hover伪类中定义CSS“已转换”规则，那么当图像不再悬停时，它将自动转换回其原始状态。

以下是使用部分代码的简化示例（由于您的图像出现故障，我将图像更改为维基百科徽标）：

.sample img {
  transform: rotate(30deg);
  transition: ease-in-out 700ms;  
}

.sample img:hover {
  transform: rotate(0deg);
}

<div class="sample">
  <img src="https://en.wikipedia.org/static/images/project-logos/enwiki.png">
</div>

hover伪类是一个“活动状态类”，这意味着它只在该动作发生时才起作用（即指针悬停在元素上）。

如果要在从默认状态更改为悬停状态时包含特殊缓动和计时规则，请在默认规则中包含transition属性。您可以指定转换发生的时间长度，以便更改“动画”。您会注意到，在上面的示例中，我将旋转延伸到700毫秒，这样您就可以看到它在悬停时转动，然后在不再徘徊时转回。

转换后的图像如何在悬停时转换回原始形状？

1 个答案: