Question

我有下面的代码，我试图将图像旋转360度。但是旋转会摇摆。

.pully {
  position: absolute;
  right: 3.7em;
  bottom: 1em;
  z-index: 11;
  animation-name: clockwiseSpinner;
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;
  animation-duration: 1s;
}

.line {
  position: absolute;
  right: 145px;
  bottom: 10px;
  height: 200px;
  border-right: 2px solid red;
}

@-webkit-keyframes clockwiseSpinner {
  from {-webkit-transform: rotate(0deg)}
  to {-webkit-transform: rotate(360deg)}
}

<div class="line"></div>
<img class="pully" src="https://s8.postimg.cc/vax8le4x1/p-pully.png" alt="">

JSFiddle

有什么主意我该如何消除这种不稳定性？

Answer 1

“是图像”是正确的，但并非完全正确。由于int result = Integer.parseUnsignedInt(number); 是默认的内联元素，因此它的属性为img 对，它在视觉上会产生效果，并在其下面带有一个空白或“边界底部” （可以很容易地看到它的边界，例如您已经做完了），那当然是罪魁祸首，并会造成这种摇摆效果。

因此，要解决此问题，只需将vertical-align: baseline的默认值更改为例如baseline，top或middle，因为这些是要使用的“某些值” 。

另一种解决方法是将其显示为bottom 级别元素，其中block 属性没有位置。

注意：如果将这些更改应用于您的第一个示例或原始帖子，该问题仍然存在，因此，这确实是“图像的错误”。

vertical-align

.pully, .pully_left {
  border: 1px solid red;
  position: absolute;
  right: 3.8em;
  bottom: 1em;
  z-index: 11;
  animation-name: clockwiseSpinner;
  animation-timing-function: ease-in;
  animation-iteration-count: 4;
  animation-duration: 1s;
  /* shorthand: "animation: clockwiseSpinner 1s ease-in 4;" */
}

.pully_left {right: 10.25em}

.line {
  position: absolute;
  right: 145px;
  bottom: 10px;
  height: 200px;
  border-right: 2px solid red;
}

.pully > img {vertical-align: bottom} /* or: "top", "middle" or: "display: block" */

@-webkit-keyframes clockwiseSpinner {
  /*from {-webkit-transform: rotate(0deg)} unnecessary */
  to {-webkit-transform: rotate(360deg)}
}

CSS3旋转摆动

1 个答案: