如何在 link 上制作动画 gif 并在悬停和重置时播放它

Question

首先非常感谢这个页面，它对我帮助很大！但是在这一点上我有一个问题，我找不到适合我想要的答案（也许无法按照我的方式实现）。

我想要一个带有静态图像的 link，当用户将光标移到 link 上时，我想要一个动画 gif 播放（动画 gif 设置为不循环，所以它只播放一次）。当用户离开时回到静态图像，如果用户再次进入，gif 应该从头开始播放。

我正在使用 html5 结合 CSS 来创建我的网站（我同时使用它来学习）。我过去曾使用 C++ 和类似语言进行过编程，但从未在 Web 上下文中进行过编程。

到目前为止，这是我尝试过的：

CSS:

.img-acu
{
float: left;
width: 450px;
height: 264px;
background:transparent url("acu.gif") center top no-repeat;
}

.img-acu:hover
{
background-image: url("acusel.gif");
}

HTML:

<a href="../example.html" class="img-acu" title="ACU Project link"></a>

但是什么也没有出现:( 奇怪的是，我将同一个示例与两个静态图像（png 格式）一起使用，并且效果很好，但由于某些原因，动画 gif 它不想工作。

我试过这个：

CSS:

#test
{
width: 450px;
height: 264px;
background-image: url("acu.gif");
background-repeat: no-repeat;
background-position: left;
margin-left: 75px;
}

#test:hover
{
background-image: url("acusel.gif");
}

HTML:

<div id="test"></div>

效果很好，只是 link 不起作用，当动画 gif 到达最后一帧时，它永远不会重置（除非我重新加载页面）。

你知道在 HTML5 + CSS 中是否有任何方法可以正确实现这一点？我应该使用 javascript 还是 php？

非常感谢任何帮助！

非常感谢！！

Answer 1

这可以通过使用静态图片和您的 gif 图片来实现（嘿，9gag 是怎么做到的！）

基本脚本可能是这样的：

<img id="myImg" src="staticImg.png" />

<script>
    $(function() {
        $("#myImg").hover(
            function() {
                $(this).attr("src", "animatedImg.gif");
            },
            function() {
                $(this).attr("src", "staticImg.jpg");
            }                         
        );                  
    });
</script>

Answer 2

如果可以使用就试试这个canvas:

<!DOCTYPE html>
<html>
<head>
    <style>
        .wrapper {position:absolute; z-index:2;width:400px;height:328px;background-color: transparent;}
        .canvas {position:absolute;z-index:1;}
        .gif {position:absolute;z-index:0;}
        .hide {display:none;}
    </style>

    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

    <script>
        window.onload = function() {
            var c = document.getElementById("canvas");
            var ctx = c.getContext("2d");
            var img = document.getElementById("gif");
            ctx.drawImage(img, 0, 0);
        }

        $(document).ready(function() {
            $("#wrapper").bind("mouseenter mouseleave", function(e) {
                $("#canvas").toggleClass("hide");
            });
        });
    </script>

</head>
<body>

<div>
    <img id="gif" class="gif" src="https://www.macobserver.com/imgs/tips/20131206_Pooh_GIF.gif">

    <canvas id="canvas" class="canvas" width="400px" height="328px">
        Your browser does not support the HTML5 canvas tag.
    </canvas>

    <div id="wrapper" class="wrapper"></div>
</div>

</body>
</html>

Answer 3

您采用的方法无效，因为 CSS 不会更改的背景。解决这个问题完全可以用 vanilla JS + HTML 来完成。诀窍是放置：

<div class="img-acu">

内部：

<a href="../example.html" title="ACU Project link"> (insert here) </a>

剩下的就是 CSS 瞄准 div。这样，您可以设置静态背景，然后在 :hover

上更改

这里有一个 fiddle 展示了这个动作（或者你可以 fiddle 用这个：https://jsfiddle.net/lyfthis/yfmhd1xL/）：

.img-acu
{
  float: left;
  width: 250px;
  height: 132px;
  background:transparent url("https://i.imgur.com/7r91PY3.jpeg") center top no-repeat;
  background-size: 125%;
}

.img-acu:hover
{
  background-image: url("https://media.giphy.com/media/QMkPpxPDYY0fu/giphy.gif");
}

<!-- Don't do this: 
<a href="../example.html" class="img-acu" title="ACU Project link"></a>
-->

<div>
  <div>Click on image below to go to link:</div>
  <a href="https://www.google.com" title="ACU Project link">
    <div class="img-acu"></div>
  </a>
</div>

Answer 4

希望这种简单的方法可以帮助到某人：

<img class="static" src="https://lh4.googleusercontent.com/-gZiu96oTuu4/Uag5oWLQHfI/AAAAAAAABSE/pl1W8n91hH0/w140-h165-no/Homer-Static.png"><img class="active" src="https://lh4.googleusercontent.com/i1RprwcvxhbN2TAMunNxS4RiNVT0DvlD9FNQCvPFuJ0=w140-h165-no">

然后添加以下内容CSS:

.static {
  position: absolute;
  background: white;
 }

.static:hover {
  opacity: 0;
 }

希望这对某些人有所帮助。我从 codepen 获得了代码，并决定一些堆栈溢出用户可能会发现它有帮助。如果您想查看原始代码笔，请访问此处：CodePen

如何在 link 上制作动画 gif 并在悬停和重置时播放它

How to have an anim gif on a link and play it on hover and reset

html

css

animation

reset