Как обвести элемент, такой как div или изображение вокруг точки или мыши, используя jquery и CSS3 KeyFrames? - PullRequest
Новая
       358

Как обвести элемент, такой как div или изображение вокруг точки или мыши, используя jquery и CSS3 KeyFrames?

1 голос
/ 23 декабря 2011

все

У меня возникла проблема при попытке использовать ключевые кадры jquery и css3 для перемещения или окружения элемента, такого как div или изображение, вокруг точки или мыши, продолжая, не задерживая время, просто держите круг вокруг

Есть решение?Пожалуйста, покажите мне.заранее спасибо !

Ответы [ 2 ]

4 голосов
/ 23 декабря 2011

Из ваших уточняющих комментариев:

заданная позиция, как сделать изображение или элемент окружности

CSS3 анимация

Чтобы создать анимацию, в которой элемент вращается вокруг точки плавно и продолжается вечно, вы можете использовать следующие свойства ключевого кадра / анимации CSS3 и 2D-преобразования:

  • animation для указания времени и используемых ключевых кадров.
  • animation-timing-function, чтобы указать, что вы хотите плавную анимацию (linear).
  • @keyframes, чтобы точно указать, как анимировать элемент.
  • transform-origin для поворота вокруг точки, отличной от центра div (некоторое смещение).
  • transform для перемещения элемента из центра вращения (радиуса орбиты).
  • rotate(<angle>);, чтобы указать, что вы хотите повернуть в ваших ключевых кадрах.

Вам, вероятно, потребуется продублировать их и наделить префиксами -webkit-, -moz- и -ms- на некоторое время, пока функции анимации CSS3 не получат широкую поддержку.

Указание позиции в CSS / jQuery

Вы можете использовать обычный старый CSS, чтобы вращать элемент HTML вокруг произвольной точки: 

div.someClass {
    position:absolute;
    top:250px;
    left:350px;
}

Если вы хотите постоянно центрировать анимацию на курсоре мыши, вам нужно использовать jQuery для обработки события mousemove в документе и установить свойства left и top CSS элемента.

Что-то вроде: 

$(document).mousemove(function(event) {
    var animated = $("#animated");
    var offsetX = 50; // Pixels to the right of the cursor
    animated.css("left", event.pageX + offsetX);
    animated.css("top", event.pageY - animated.height() / 2);
});

Docs

Пример кода

Я создал пример кода для исследования функций и ссылок, которые вам понадобятся, чтобы создать его самостоятельно. Так как другой ответ уже дал вам их пример кода, я продолжу и отправлю мой.

Я настоятельно рекомендую вам создать это самостоятельно, чтобы вы могли узнать, как эти вещи работают:)

Поддержка браузера

См. эту страницу с матрицей поддержки CSS3-анимации и эту страницу с матрицей поддержки 2D-преобразования CSS3 .

Суть:

  • Это будет работать только в IE 10.0 и выше. Это не будет работать в IE9
  • Он будет работать практически во всех версиях Firefox или Chrome
  • Должно работать в Safari 4.0 и более поздних версиях
  • Вероятно, он не будет работать в Opera (мне понадобятся -o- теги Tranform, чтобы заставить его работать, а поддержка анимации просто еще не существует)
1 голос
/ 23 декабря 2011

Я думаю, это то, что вы просили: http://jsfiddle.net/BZSQd/

Дайте мне знать, если у вас есть какие-либо вопросы:) 

@-webkit-keyframes spin {
    from { -webkit-transform: rotateZ(0); }
    to   { -webkit-transform: rotateZ(-360deg); }
}

div {
    border   : 1px solid #000;
    width    : 1px;
    height   : 1px;
    position : absolute;
    -webkit-animation        : spin 8s infinite linear;
    -webkit-transform-origin : 50px 50px;
}
...