Задать вопрос
@exehtml
html

Как циклично вращать фоновое изображение методом svg или html5?

Есть обычная html-страница, есть у неё div:
div.bg{
width:100%;
height:100%;
position:fixed;
background:url('bg.png') center center no-repeat fixed;
}
Сама картинка bg.png пусть будет символичным солнышком 2000х2000px. Нам надо сделать так, чтобы это солнышко вращалось на фоне страницы. Сейчас это реализовано так:
$(document).ready(function(){
	rotateBg()
});
function rotateBg() {
	v0 = 0;
	function animate() {
		if (v0 >= 360){v0 = 0;}
		v0 = v0 + 0.2;
		$('.beaming').css({'transform': 'rotate(' + v0 + 'deg)'});
	}
	intervalID = setInterval(animate, 40);
}

В результате фон div'а статично относится к оному, а вот сам div вращается со скоростью 0.2 градуса в 40 миллисекунд.

Мне нужно сделать так, чтобы див был статичным/неподвижным, а вращалось его фоновое изображение. Причем чтобы это был не gif (которые не поддерживает альфа-каналов и будет оч много весить), а что-то, созданное при помощи технологии svg или же html5.

Заранее спасибо.
  • Вопрос задан
  • 2590 просмотров
Комментировать
Подписаться 2 Оценить Комментировать
Решения вопроса 2
AMar4enko
@AMar4enko
Бэкграунд вращать не получится, вращаейте div с изображением через transition без JS, там есть возможность организовать цикличную анимацию.
Вот затравка
@keyframes changewidth {
  from {
    width: 100px;
  }

  to {
    width: 300px;
  }
}

div {
  animation-duration: 0.1s;
  animation-name: changewidth;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
Ответ написан
3 комментария
3 комментария
Petroveg
@Petroveg
Миром правят маленькие с#@&ки
Вам для цикличности больше подходит animation.

Если формировать что-то сложное с помощью html, то это, скорее всего, будет canvas. Это будет элемент и схема понятна — он с position:absolute, а блок с контентом position:relative и с повышением положения в stacking context за счёт z-index:1.

Если это будет svg, то можно делать как элементом (и подход тот же), так и фоновым изображением (data:uri).
Ответ написан
14 комментариев
14 комментариев
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend-разработчик (React)
ДАЛЕЕ
от 140 000 ₽
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Cоздание мобильного приложения (обновленное объявление)
07 мая 2024, в 01:11
90000 руб./за проект
Разработать веб-ресурс для анкетирования пользователей на Python/C#
06 мая 2024, в 22:50
40000 руб./за проект
Скопировать дизайн со скриншотов с небольшими правками в figma
06 мая 2024, в 21:43
1500 руб./за проект
Ещё заказы