如何在 HTML 中向上移動圖像？

Question

我試圖讓圖像向上移動。 問題是我添加的代碼不起作用。

img src="arrow_inv.png" {
      animation-duration: 2.4s;
      animation-name: arrow;
    }

    @keyframes arrow {
      from {
        float: right; margin: 28em -4em 1em 1em;
      }

      to {
        float: right; margin: 8em -4em 1em 1em;
      }
    }

<img src="arrow_inv.png" style="float: right; margin: 28em -4em 1em 1em;" width="100px" height="75px">

有誰知道我該如何解決這個問題？

Answer 1

您需要使用img[src="..."] 。 你可以在 MDN 上閱讀一些屬性選擇器的例子。 下次調試簡單的案例時，可以盡量簡化，讓它工作，然后再添加更多。 例如，在這種情況下，您可以將其設置為img { ... }因為只有一張圖像，並且看到它有效，您就會知道img src="arrow_inv.png"需要修復。

您可能想要也可能不想要正確的負邊距，這取決於您想要做什么。

 img[src="https://i.imgur.com/j7Ie7pg.jpg"] { animation-duration: 2.4s; animation-name: arrow; } @keyframes arrow { from { float: right; margin: 28em -4em 1em 1em; } to { float: right; margin: 2em -4em 1em 1em; } }

 <img src="https://i.imgur.com/j7Ie7pg.jpg" style="float: right; margin: 28em -4em 1em 1em;" width="100px" height="75px">