CSS @keyframes cursor animation 在 ZE0542F579DF8E8138ADE69F8F53 上闪烁
[英]CSS @keyframes cursor animation flickers on hover
问题描述
I've created an @keyframes animation that changes the cursor with custom images, and assigned it to div on hover.
我创建了一个@keyframes animation，它使用自定义图像更改 cursor，并将其分配给 hover 上的 div。
When hovering on the div for the first time after the page is loaded, the cursor either flicker or disappear for a second, and then works normally as intended.页面加载后第一次悬停在 div 上时，cursor 会闪烁或消失一秒钟，然后按预期正常工作。
Why does this occur, and how can it be fixed?为什么会发生这种情况，如何解决？
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>
1 个解决方案
解决方案1
0 2021-12-22 12:05:00
The problem was that images initially took time to load, and the solution to this is preloading the images.问题是图像最初需要时间来加载，解决方案是预加载图像。
Thanks for CBroe for helping me with this.感谢CBroe帮助我解决这个问题。
The JS preloading source JS预加载源
var images = new Array() function preload() { for (i = 0; i < preload.arguments.length; i++) { images[i] = new Image() images[i].src = preload.arguments[i] } } preload( "https://perseverancex.sirv.com/images/frame-1.png", "https://perseverancex.sirv.com/images/frame-2.png", "https://perseverancex.sirv.com/images/frame-3.png", "https://perseverancex.sirv.com/images/frame-4.png", "https://perseverancex.sirv.com/images/frame-5.png", "https://perseverancex.sirv.com/images/frame-6.png", "https://perseverancex.sirv.com/images/frame-7.png", "https://perseverancex.sirv.com/images/frame-8.png", "https://perseverancex.sirv.com/images/frame-9.png", "https://perseverancex.sirv.com/images/frame-10.png", "https://perseverancex.sirv.com/images/frame-11.png", "https://perseverancex.sirv.com/images/frame-12.png", "https://perseverancex.sirv.com/images/frame-13.png", "https://perseverancex.sirv.com/images/frame-14.png", "https://perseverancex.sirv.com/images/frame-15.png", "https://perseverancex.sirv.com/images/frame-16.png", "https://perseverancex.sirv.com/images/frame-17.png", "https://perseverancex.sirv.com/images/frame-18.png", "https://perseverancex.sirv.com/images/frame-19.png", "https://perseverancex.sirv.com/images/frame-20.png", "https://perseverancex.sirv.com/images/frame-21.png", "https://perseverancex.sirv.com/images/frame-22.png", "https://perseverancex.sirv.com/images/frame-23.png", "https://perseverancex.sirv.com/images/frame-24.png" ) 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
具有关键帧和悬停的CSS动画 - CSS animation with keyframes and hover
CSS @keyframe animation 在 hover 上闪烁 - CSS @keyframe animation flickers on hover
CSS :hover @keyframes 动画使图像闪烁 - CSS :hover @keyframes animation makes the image flicker
关键帧 animation 不适用于：之前和：hover css - keyframes animation not work in :before and :hover css
继续 CSS3 关键帧动画悬停/停止重复悬停 - Continue CSS3 Keyframes Animation on Hover / Stop Repeat on Hover
CSS animation 用于 hover 效果闪烁，在 FF 中未正确显示 - CSS animation for hover effect flickers, not properly showing in FF
悬停CSS上的文字闪烁 - Text flickers on hover CSS
当您在CSS中悬停单独的对象时，触发@keyframes动画 - trigger @keyframes animation, when you hover seperate object in CSS
CSS悬停闪烁 - CSS hover flickers
CSS-在关键帧中触发悬停 - CSS - Trigger hover in keyframes
相关标签