Question

我看过各种堆栈溢出帖子和一个有用的网站，例如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动画与光标类一起调用以进行测试。我确保已清楚地勾勒出光标类的轮廓，以便可以将光标放在其中，但是什么也没出现！我不知道是什么错误导致动画无法播放。

Answer 1

好吧，我刚刚意识到自己有多愚蠢……当我在样式表中引用图像时，控制台开始吐出甚至找不到图像的错误。然后我意识到我要引用的图像与样式表位于不同的文件夹中。因此，我的解决方案是：将怪胎图像移到样式文件夹中。完成。

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

1 个答案: