Можно добавить переход CSS3 к курсору изображению, которое в теге тела без анимации всего тела ...CSS3 добавить курсор переходы
возможно добавление класса где-нибудь?
.cursor { cursor: url("/images/light1_CROP.png"), auto;
animation-iteration-count: infinite;
animation-name: changewidth;
animation-direction: alternate;
animation-duration: 4.1s;
}
[...]
не будет работать ...
Как уже было отмечено выше: Вы не можете анимировать свойство курсора. Кроме того, способ, которым вы пытались это сделать, не может работать, потому что вы анимации какого-либо div на вашей странице, но не самого курсора.
Вот что вы можете сделать: Вы можете скрыть обычный курсор, поместить курсор-изображение внутри div (в моем примере я решил сделать это как фоновое изображение) и переместить его вместе с курсором, используя JavaScript.
Теперь вы можете анимировать свой курсор-div, как вам нравится.
$(document).mouseenter(function() {
$('.cursor').show();
});
$(document).mouseleave(function() {
$('.cursor').hide();
});
$(document).mousemove(function(e) {
var posX = e.pageX - 19,
posY = e.pageY - 21;
$('.cursor').css({
left: posX + 'px',
top: posY + 'px'
}
);
});.cursor {
background-image: url("http://stormfall.linuxweb.net/images/light1_CROP.png");
width: 39px;
height: 42px;
animation-iteration-count: infinite;
animation-name: changewidth;
animation-direction: alternate;
animation-duration: 4.1s;
position: absolute;
display: none;
top: -21px;
left: -19px;
}
body {
cursor: none;
}
@keyframes changewidth {
from {
-ms-transform: scale(0.5, 0.5);
-webkit-transform: scale(0.5, 0.5);
-moz-transform: scale(0.5, 0.5);
transform: scale(0.5, 0.5);
}
to {
-ms-transform: scale(1.5, 1.5);
-webkit-transform: scale(1.5, 1.5);
-moz-transform: scale(1.5, 1.5);
transform: scale(1.5, 1.5);
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Move your mouse here...
<div class="cursor">
</div>Однако есть один недостаток: Это работает до тех пор, пока вы не хотите, чтобы нажать на что-либо, потому что курсор-ДИВ будет на пути каждого клика, так что если вы есть некоторые элементы, которые можно щелкнуть на вашей странице, такие как ссылки или кнопки, вам нужно выяснить способ перенаправления всех событий-кликов с вашего курсора-div на все, что находится под ним.
Не совсем понятно, чего вы пытаетесь достичь. Во-первых, что вы подразумеваете под «без оживления всего тела»? Во-вторых, из вашего кода кажется, что у вас есть div '.cursor', который вы анимируете и хотите изменить изображение курсора, когда вы зависаете над этим div. Но ваше описание подразумевает, что вы действительно хотите анимировать изображение курсора. Можете ли вы прояснить и добавить какой-нибудь html-код, если это применимо, или, может быть, скрипку? – mmgross
не на наведении на div, я хочу анимировать только курсор внутри тела, но я все еще оживляю все тело, когда добавляю класс в тело, просто анимируем сам курсор, не используя gif ... – Shorty