悬停时开始制作 Gif

Question

我不知道如何让我的按钮在悬停时启动 gif，如果它没有悬停 - 它会返回到之前的背景，并再次在悬停时从起始位置启动 gif。 我得到的是一个不断播放的 gif，悬停时我得到一个随机位置（因为 gif 不断播放）

CSS

.gradient-button {
    /* Text Styles */
    color: white;
    font-size: 20px;
    text-decoration: none;
    font-weight: bold;
    padding: 10px 20px;
    border: none;
    border-radius: 25px;
    position: relative;
    overflow: hidden;

    /* Dark Purple Background by default */
    background: #282828;

    /* Shadow Effect */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

    /* Transition for Hover Effect */
    transition: background 1s ease;
    cursor: pointer;
}

.gradient-button:hover {
    /* Hover Effect: GIF Background */
    background: url('./gifs/nastronke.gif') no-repeat center center;
    background-size: fill;

    /* Hover Effect: Lift Button */
    transform: translateY(-5px);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}

.gradient-button:hover::before {
    opacity: 0; /* Remove the overlay on hover */
}

HTML/PHP

<?php
                session_start();
                if (isset($_SESSION["user_id"])) {
                    echo '<a href="../logout.php" class="gradient-button">LOGOUT</a>';
                } else {
                    echo '<a href="../login.php" class="gradient-button">LOGIN</a>';
                }
                ?>

有什么想法可以解决吗？

悬停时开始 gif（停在末尾），未悬停时停止，然后悬停时从开头开始。

Answer 1

1. 准备图像：您需要两个图像：一个静态图像（例如，一个 未悬停时显示的 GIF 框架和 GIF 本身。
2. JavaScript 交换图像： 使用 JavaScript 更改 src img 标签的属性或按钮的背景图像 它悬停在上方以及悬停结束时。

以下是您可以调整当前设置以包含 JavaScript 功能的方法。由于您的按钮似乎被设计为链接（

<a>

标签），因此您需要稍微调整方法以使用

div

或可以动态更改背景的类似元素。不过，为了简单起见，我将演示如何将图像交换为标签，您可以根据您的需要进行调整。

HTML

<a href="#" class="gradient-button" id="animatedButton">LOGIN</a>

CSS 您的 CSS 基本保持不变，但您将从

background

中删除

.gradient-button:hover

属性更改，因为我们将使用 JavaScript 处理悬停效果。

JS

<script> document.addEventListener('DOMContentLoaded', function() {
var button = document.getElementById('animatedButton');

button.addEventListener('mouseenter', function() {
    // Change to animated GIF on hover
    this.style.backgroundImage = "url('./gifs/nastronke.gif')";
});

button.addEventListener('mouseleave', function() {
    // Change back to static image when not hovered
    this.style.backgroundImage = "url('./path/to/your/static/image.jpg')";
}); }); </script>

请记住将

'./path/to/your/static/image.jpg'

替换为静态图像的实际路径，并根据设置需要调整路径。

希望它有效 🙂