मैंने विभिन्न स्टैक ओवरफ़्लो पोस्ट और उपयोगी वेबसाइट जैसे https://css को देखा है -tricks.com/forums/topic/animated-cursor/, लेकिन मैं वास्तव में नहीं जानता कि यह एनिमेशन ठीक से काम क्यों नहीं कर रहा है

मूल रूप से, मैं एक कर्सर के रूप में एक जीआईएफ का उपयोग करने की कोशिश कर रहा था, लेकिन आगे के शोध के साथ मैंने पाया कि जीआईएफ एक समर्थित कर्सर प्रकार नहीं हैं। इसलिए, मैंने अपने gif के प्रत्येक फ्रेम को pngs में बदल दिया और एनिमेटेड कर्सर बनाने के लिए @keyframes को ue करने का प्रयास किया।

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 एनिमेट को लागू किया जाता है। मैंने सुनिश्चित किया है कि कर्सर वर्ग स्पष्ट रूप से उल्लिखित है ताकि मैं उसमें अपना कर्सर रख सकूं, लेकिन कुछ भी दिखाई नहीं दे रहा है! मुझे नहीं पता कि क्या त्रुटि है जो इस एनीमेशन को खेलने से रोक रही है।

-1
Nathan Pham 19 जून 2019, 02:39

1 उत्तर

सबसे बढ़िया उत्तर

ठीक है, मुझे अभी एहसास हुआ कि मैं कितना बेवकूफ हूं ... जब मैंने स्टाइलशीट में एक छवि का संदर्भ दिया, तो कंसोल ने त्रुटियों को थूकना शुरू कर दिया कि यह छवि भी नहीं ढूंढ सका। तब मुझे एहसास हुआ कि जिन छवियों का मैं संदर्भ दे रहा था, वे स्टाइलशीट की तुलना में एक अलग फ़ोल्डर में थीं। तो मेरा समाधान: बस अजीब छवियों को स्टाइलिंग फ़ोल्डर में ले जाएं। किया हुआ।

0
Nathan Pham 19 जून 2019, 00:58