时间戳

首页 > 解决方案 > 如何在悬停时在多个帧之间进行图像循环？

css - 如何在悬停时在多个帧之间进行图像循环？

问题描述

我想让图像执行以下操作：

  1. 从静态图像开始
  2. 悬停时循环多帧
  3. 不再悬停时返回静态图像

我正在使用的图像框架：

我试过这个，但无法让它工作（它什么也没显示，即使复制和粘贴链接到该页面上的 jsfiddle 示例也是如此）。

还有一种方法可以将其放入 img 标签而不是 div 标签中吗？

标签： css

解决方案

纯 CSS 解决方案

@keyframes zigzag{
    0%{
        background-image: url('https://i.imgur.com/6z28Xcz.png');
    }
    25%{
        background-image: url('https://i.imgur.com/A0d4DL0.png');
    }
    50%{
        background-image: url('https://i.imgur.com/1QOJG9w.png');
    }
    100%{
        background-image: url('https://i.imgur.com/zwjr693.png');
    }
}

#logo{
    width: 400px;
    height: 170px;
    border: 5px solid;
    border-radius: 20%;
    background-image: url('https://i.imgur.com/6z28Xcz.png');
    background-repeat: no-repeat;
    background-size: cover;
}

#logo:hover{
    animation: zigzag 2000ms ease-in infinite;
}
<div id="logo"></div>

推荐阅读