【发布时间】：2022-01-23 12:46:06
【问题描述】：
我创建了一个 @keyframes 动画，它用自定义图像改变光标，并在悬停时将其分配给 div。
页面加载后第一次悬停在div上时，光标会闪烁或消失一秒钟，然后按预期正常工作。
为什么会发生这种情况，如何解决？
div {
background-color: #71c174;
display: inline-block;
margin: 0;
padding: 10px;
font-size: 30px;
}
div:hover {
cursor: url(https://perseverancex.sirv.com/images/frame-24.png), auto;
animation-name: cursor;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes cursor {
0% {
cursor: url(https://perseverancex.sirv.com/images/frame-1.png), auto;
}
4% {
cursor: url(https://perseverancex.sirv.com/images/frame-2.png), auto;
}
8% {
cursor: url(https://perseverancex.sirv.com/images/frame-3.png), auto;
}
12% {
cursor: url(https://perseverancex.sirv.com/images/frame-4.png), auto;
}
16% {
cursor: url(https://perseverancex.sirv.com/images/frame-5.png), auto;
}
20% {
cursor: url(https://perseverancex.sirv.com/images/frame-6.png), auto;
}
24% {
cursor: url(https://perseverancex.sirv.com/images/frame-7.png), auto;
}
28% {
cursor: url(https://perseverancex.sirv.com/images/frame-8.png), auto;
}
32% {
cursor: url(https://perseverancex.sirv.com/images/frame-9.png), auto;
}
36% {
cursor: url(https://perseverancex.sirv.com/images/frame-10.png), auto;
}
40% {
cursor: url(https://perseverancex.sirv.com/images/frame-11.png), auto;
}
44% {
cursor: url(https://perseverancex.sirv.com/images/frame-12.png), auto;
}
48% {
cursor: url(https://perseverancex.sirv.com/images/frame-13.png), auto;
}
52% {
cursor: url(https://perseverancex.sirv.com/images/frame-14.png), auto;
}
56% {
cursor: url(https://perseverancex.sirv.com/images/frame-15.png), auto;
}
60% {
cursor: url(https://perseverancex.sirv.com/images/frame-16.png), auto;
}
64% {
cursor: url(https://perseverancex.sirv.com/images/frame-17.png), auto;
}
68% {
cursor: url(https://perseverancex.sirv.com/images/frame-18.png), auto;
}
72% {
cursor: url(https://perseverancex.sirv.com/images/frame-19.png), auto;
}
76% {
cursor: url(https://perseverancex.sirv.com/images/frame-20.png), auto;
}
80% {
cursor: url(https://perseverancex.sirv.com/images/frame-21.png), auto;
}
84% {
cursor: url(https://perseverancex.sirv.com/images/frame-22.png), auto;
}
88% {
cursor: url(https://perseverancex.sirv.com/images/frame-23.png), auto;
}
100% {
cursor: url(https://perseverancex.sirv.com/images/frame-24.png), auto;
}
}<body>
<div>Hover Box</div>
</body>【问题讨论】：
-
您的问题的正确minimal reproducible example 直接属于您的问题，请不要将其转储到外部平台上。
-
“为什么会这样” - 因为加载图像需要时间？ “如何修复？” - 通过预加载必要的图像，以便从那一刻起可以从浏览器缓存中获取它们。 （如果您不知道如何预加载图像，请进行一些研究，这已经是一个老话题了。）
-
感谢您的回答，我在网上搜索以测试您的想法并成功了。
标签： css css-animations flicker keyframe