Css 如何在链接上放置动画gif，并在悬停和重置时播放_Css_Html_Animation_Reset

Css 如何在链接上放置动画gif，并在悬停和重置时播放

css html animation

Css 如何在链接上放置动画gif，并在悬停和重置时播放,css,html,animation,reset,Css,Html,Animation,Reset,首先非常感谢这个页面，它给了我很多帮助！但在这一点上，我有一个问题，我找不到一个符合我想要的答案（也许它不能以我现在的方式实现）我希望有一个带有静态图像的链接，当用户将光标移动到链接上时，我希望播放动画gif（动画gif设置为“不循环”，因此只播放一次）。当用户移出时，返回到静态图像，如果用户再次进入，gif应该从头开始播放我正在使用html5与CSS结合来创建我的web（同时我也在使用它来学习）。过去我用C++和类似程序编程过，但从来没有在网络环境下编程过。到目前为止，这是我尝试的： C

首先非常感谢这个页面，它给了我很多帮助！但在这一点上，我有一个问题，我找不到一个符合我想要的答案（也许它不能以我现在的方式实现）

我希望有一个带有静态图像的链接，当用户将光标移动到链接上时，我希望播放动画gif（动画gif设置为“不循环”，因此只播放一次）。当用户移出时，返回到静态图像，如果用户再次进入，gif应该从头开始播放

我正在使用html5与CSS结合来创建我的web（同时我也在使用它来学习）。过去我用C++和类似程序编程过，但从来没有在网络环境下编程过。到目前为止，这是我尝试的：

CSS:

HTML:

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

你知道在HTML5+CSS中有没有合适的方法来实现这一点？我应该使用javascript还是php

我真的很感激任何帮助

非常感谢

这可以通过使用静态图像和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>


$（函数（）{
$（“#myImg”）。悬停(
函数（）{
$（this.attr（“src”、“animatedImg.gif”）；
},
函数（）{
$（this.attr（“src”，“staticImg.jpg”）；
}                         
);                  
});

如果可以使用画布，请尝试以下操作：

<!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>


.wrapper{位置：绝对；z索引：2；宽度：400px；高度：328px；背景色：透明；}
.canvas{位置：绝对；z索引：1；}
.gif{位置：绝对；z索引：0；}
.hide{display:none；}
window.onload=函数（）{
var c=document.getElementById（“画布”）；
var ctx=c.getContext（“2d”）；
var img=document.getElementById（“gif”）；
ctx.drawImage（img，0,0）；
}
$（文档）.ready（函数（）{
$（“#包装器”）.bind（“mouseenter mouseleave”，函数（e）{
$（“#画布”）.toggleClass（“隐藏”）；
});
});
您的浏览器不支持HTML5画布标记。

您采取的方法不起作用，因为CSS不会更改上的背景。解决这个问题完全可以通过vanillaJS+HTML来完成。诀窍在于：

<div class="img-acu">


单击下面的图片转到链接：

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

<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">

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

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

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

<!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>

<div class="img-acu">

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

<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">

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

.static:hover {
  opacity: 0;
 }