Как элемент двигаться по круговой?

Question

[Bazhenovdev]

Всем привет друзья! есть вот такая не большая страница, решил сделать для подруги.. небольшой подарок. И что бы внести чуточку веселья, я решил заставить МЫШКУ БЕГАТЬ! :D Вот вопрос "Как заставить бегать мышь, по всему экрану.. что бы она могла поворачивать?" Вот картинка, мышка серенькая в левом углу :D

Answer 1

[Механик]

CSS-анимация Вам в помощь. Берете мышь, делаете ей position:absolute или fixed, если скролла нет. И затем кейфреймами с помощью transform:rotate(), transform-origin, transform:translate() делаете анимацию передвижения мыши, хоть по кругу, хоть зигзагами, хоть параллелепипедом.

Answer 2

[Anna_BS]

Можно использовать css анимацию codepen.io
Единственный минус мышка может бегать задом)

Comments

[Механик]

Для этого есть transform: scaleX(-1)

Answer 3

[Максим Тимофеев]

с помощью js. Добежала до края, повернули, побежали дальше. И курсор в виде прицела. Если клик по мышке - кровь на весь экран и веселая музыка.

Comments

[Bazhenovdev]

А можете мне помочь со скриптом?

[Максим Тимофеев]

Bazhenovdev: Занят по уши. Да и поздно уже наверное.

Answer 4

[jekaD]

Тут можно почитать https://learn.javascript.ru/css-transitions