Как вы анимируете курсор с помощью CSS? - PullRequest
Новая
       17

Как вы анимируете курсор с помощью CSS?

0 голосов
/ 19 июня 2019

Я просмотрел различные сообщения о переполнении стека и полезный веб-сайт, такой как 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 вызывается с классом курсора для тестирования. Я позаботился о том, чтобы класс курсора был четко обозначен, чтобы я мог поместить в него свой курсор, но НИЧЕГО НЕ ПОЯВЛЯЕТСЯ! Я не знаю, в чем заключается ошибка, из-за которой эта анимация не воспроизводится.

1 Ответ

0 голосов
/ 19 июня 2019

Хорошо, я только что понял, какой я глупый ... когда я ссылался на изображение в таблице стилей, консоль начала выплевывать ошибки, которые она не могла даже найти изображение. Затем я понял, что изображения, на которые я ссылаюсь, находятся в другой папке, чем таблица стилей. Итак, мое решение: просто переместите странные изображения в папку стилей. Готово.

...