按钮 html 的动画 gif 图标答案

【问题标题】：animated gif icon for button html按钮 html 的动画 gif 图标
【发布时间】：2019-11-04 22:44:22
【问题描述】：

我是 html 新手。我需要一个带有 animated style 的 delete 按钮。我为animation 使用了gif 图像。我希望当用户将鼠标放在它上面时运行这个图像。目前，gif 图像正在无限运行。当用户将鼠标移到图像上时如何使图像运行。帮我解决一些问题。如果您有其他透明删除图片，请提供，它可以帮助我。

这是我尝试过的标记：

<html>
  <body>
    <a>
      <img src="https://i.postimg.cc/1RGh8PpK/delete.gif"
           alt="Delete image" width="100" height="100" />
    </a>
  </body>
</html>

【问题讨论】：

为默认状态设置静态图像，并在悬停时将其与 gif 交换。
感谢您的回复。我能得到任何例子吗？
Animating a gif on hover的可能重复
@Harun Yilmaz，答案不起作用.. 这是一个过时的答案。
“过时”是什么意思？它是用 jQuery 编写的，但您可以将其转换为纯 JavaScript 或 CSS。

标签： html css

【解决方案1】：

继续 EZGIF 以裁剪您的 gif 并使其大小适合按钮：

使用您的计算机拍摄 gif 的静态屏幕截图（您必须把握好时间）：

使用 HTML 来保存静态和动画图像元素：

<img class='static_trash' id = 'static_btn' src='https://collaboratescience.com/stack/googs/trash_static.png' alt='Delete image' width='100' height='100' />

<img class='live_trash' id = 'live_btn' src='https://i.postimg.cc/1RGh8PpK/delete.gif' alt='Delete image' width='100' height='100' />

使用 CSS 将 live_trash 设置为 "display: none"

. live_trash {
    "display" : "none"
}

使用 JavaScript 更改悬停时的图像来源：

原版 JavaScript：

let static_elem = document.getElementById("static_btn")
let live_elem = document.getElementById("live_btn")

static_elem.addEventListener("mouseenter", function( event ) {   
    event.target.style.display = "none";
    live_elem.style.display = "block"
})

static_elem.addEventListener("mouseleave", function( event ) {   
    event.target.style.display = "block";
    live_elem.style.display = "none"
})

结果：

您可以调整裁剪尺寸以使其更好。

【讨论】：

【解决方案2】：

您可以使用 JavaScript 或 CSS 实现此目的。您只需要一个来自 gif 的静态帧。

JavaScript

您可以利用mouseenter 和mouseleave 鼠标事件来更改图像的src。

const states = {
  'default': "https://i.stack.imgur.com/mJHTA.png",
  'hover': "https://i.stack.imgur.com/WwxRR.gif"
};

let img = document.querySelector('#hover-img');

img.addEventListener('mouseenter', function(e) {
  img.setAttribute('src', states.hover);
});
img.addEventListener('mouseleave', function(e) {
  img.setAttribute('src', states.default);
});

<a>
  <img src="https://i.stack.imgur.com/mJHTA.png" id="hover-img" alt="Delete image" width="100" height="100" />
</a>

CSS

或者，您可以使用 CSS 伪类 :hover 确定用户是否将鼠标悬停在元素上，但您可能希望使用 <div> 或 <span> 而不是 <img>。

.hoverable {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: center url('https://i.stack.imgur.com/mJHTA.png') no-repeat;
  background-size: contain;
}

.hoverable:hover {
  background-image: url('https://i.stack.imgur.com/WwxRR.gif');
}

&lt;a&gt;&lt;span class="hoverable"&gt;&lt;/span&gt;&lt;/a&gt;

使用数据标签的 JavaScript

或者，您可以通过data-* 属性将默认和悬停状态与元素相关联。

您可以利用mouseenter 和mouseleave 鼠标事件来更改图像的src。

let img = document.querySelector('#hover-img');

img.addEventListener('mouseenter', function(e) {
  img.setAttribute('src', e.target.getAttribute('data-hover-src'));
});
img.addEventListener('mouseleave', function(e) {
  img.setAttribute('src', e.target.getAttribute('data-default-src'));
});

<a>
  <img id="hover-img" alt="Delete image" width="100" height="100"
    src="https://i.stack.imgur.com/mJHTA.png"
    data-default-src="https://i.stack.imgur.com/mJHTA.png"
    data-hover-src="https://i.stack.imgur.com/WwxRR.gif" />
</a>

【讨论】：

【解决方案3】：

a {
    background-image: url("https://i.postimg.cc/1RGh8PpK/static-delete.png")
}
a:hover {
    background-image: url("https://i.postimg.cc/1RGh8PpK/delete.gif")   
}

【讨论】：

您需要在此处添加的其余 css
标签怎么写
以上css需要写在css文件或者style标签中
只有代码的答案通常被认为是低质量的。您能否为您的答案添加解释。