如何使用CSS为光标设置动画效果？
如何使用CSS为光标设置动画效果？
提问于 2019-06-19 07:39:32
我看过各种堆栈溢出的帖子和一个有用的网站，比如https://css-tricks.com/forums/topic/animated-cursor/，但我真的不知道为什么这个动画不能正常工作
最初，我试图使用gif作为光标，但随着进一步的研究，我发现gif不是一种受支持的光标类型。因此，我将my gif的每个帧转换为pngs，并尝试使用@keyframe来制作动画光标。
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;
}
}出于测试目的，使用cursor类调用@keyframe动画。我已经确保了cursor类的轮廓清晰，这样我就可以将光标放在它上面，但是什么也没有出现！我不知道是什么错误阻止了这个动画的播放。
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-06-19 08:58:35
好吧我刚刚意识到我有多愚蠢。当我在样式表中引用图像时，控制台开始显示错误，甚至找不到该图像。然后我意识到我引用的图像与样式表位于不同的文件夹中。因此，我的解决方案是:只需将异常图像移动到样式文件夹中即可。好了。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56658344
复制相关文章
相似问题