如何使用 CSS 为光标设置动画？答案

【问题标题】：How do you animate a cursor with CSS?如何使用 CSS 为光标设置动画？
【发布时间】：2019-06-19 08:58:34
【问题描述】：

我看过各种堆栈溢出帖子和一个有用的网站，例如https://css-tricks.com/forums/topic/animated-cursor/，但我真的不知道为什么这个动画不能正常工作

最初，我尝试使用 gif 作为光标，但经过进一步研究，我发现 gif 不是受支持的光标类型。因此，我将 gif 的每一帧都转换为 png，并尝试使用 @keyframes 来制作动画光标。

body{
    background-color: red;
}

.cursor{
    width: 100%;
    height: 100px;
    border: 1px solid grey;
    animation: animate 0.01s infinite;
}

@keyframes animate{
    0%{
        cursor: url('images/cursor/frame18.png'), auto;
    }   
    5%{
        cursor: url('images/cursor/frame1.png'), auto;
    }
    10%{
        cursor: url('images/cursor/frame2.png'), auto;
    }
    15%{
        cursor: url('images/cursor/frame3.png'), auto;
    }   
    20%{
        cursor: url('images/cursor/frame4.png'), auto;
    }
    25%{
        cursor: url('images/cursor/frame5.png'), auto;
    }
    30%{
        cursor: url('images/cursor/frame6.png'), auto;
    }
    45%{
        cursor: url('images/cursor/frame7.png'), auto;
    }
    50%{
        cursor: url('images/cursor/frame8.png'), auto;
    }
    55%{
        cursor: url('images/cursor/frame9.png'), auto;
    }   
    60%{
        cursor: url('images/cursor/frame10.png'), auto;
    }
    65%{
        cursor: url('images/cursor/frame11.png'), auto;
    }
    70%{
        cursor: url('images/cursor/frame12.png'), auto;
    }   
    80%{
        cursor: url('images/cursor/frame13.png'), auto;
    }
    85%{
        cursor: url('images/cursor/frame14.png'), auto;
    }
    90%{
        cursor: url('images/cursor/frame15.png'), auto;
    }   
    95%{
        cursor: url('images/cursor/frame16.png'), auto;
    }
    100%{
        cursor: url('images/cursor/frame17.png'), auto;
    }   
}

@keyframes 动画是用光标类调用的，用于测试目的。我已经确保光标类被清楚地勾勒出来，所以我可以把光标放在里面，但是什么都没有出现！我不知道是什么错误导致此动画无法播放。

【问题讨论】：

顺便说一句，我已经检查了 html 文件中的所有图像大小、文件位置、元素，并且样式表确实链接到了网页。

标签： html css animation

【解决方案1】：

好吧，我才意识到我是多么愚蠢……当我在样式表中引用图像时，控制台开始吐出甚至找不到图像的错误。然后我意识到我引用的图像与样式表位于不同的文件夹中。所以我的解决方案：只需将怪异的图像移动到样式文件夹中。完成。

【讨论】：