html按钮的gif动画图标

Question

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

这是我尝试过的标记：

animation

Answer 1

您可以使用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');
}

<a><span class="hoverable"></span></a>

使用数据标签的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>

Answer 2

头靠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设置为“ 显示：无”

. 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"
})

结果：

您可以尝试调整作物大小以使其更好。

Answer 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")   
}