按钮 html 的动画 gif 图标
我是 html 的新手。我需要一个delete带有animated style. 我已经将gif图像用于animation. 我希望当用户将鼠标放在它上面时运行这个图像。目前，gif 图像正在无限运行。当用户将鼠标移到图像上时如何使图像运行。帮我解决一些问题。如果您有任何其他透明删除图像，请提供，它可以帮助我。
这是我尝试的标记：
<html>
<body>
<a>
<img src="https://i.postimg.cc/1RGh8PpK/delete.gif"
alt="Delete image" width="100" height="100" />
</a>
</body>
</html>
在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"
})
结果：
您可以调整裁剪尺寸以使其更好。