Если у вас есть базовое изображение (или текст, или что-то еще), вы можете использовать преобразования CSS3 для его перемещения (это то, что используется на странице 404 FoWD - статическое изображение, преобразованное с использованием преобразований CSS3).Они не очень хорошо поддерживаются во многих браузерах, но вы можете использовать их, если знаете, что ваша цель поддерживает это.На этой странице показано, как создать эффекты поворота с помощью CSS-преобразований: http://davidwalsh.name/css-transform-rotate. Кроме того, этот код используется на странице 404 FoWD для вращения изображения:
#earth {
-webkit-animation-name: earthRotation;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 500s;
}
@-webkit-keyframes earthRotation {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
Итак, с простым HTMLстраница типа:
<html>
<head>
<meta charset="UTF-8" />
<title>Test Page</title>
<link rel="stylesheet" type="text/css" href="animation.css" />
</head>
<body>
<div id="earth" style="text-align: center;">This content will spin!</div>
<div style="text-align: center;">This will not :(</div>
</body>
</html>
Если анимация.css - это CSS-код сверху, содержимое div # earth будет вращаться вечно!Затем вы можете заменить «Этот контент будет вращаться!»со своими вещами.Если вы хотите использовать его в качестве фона (как на странице 404 FoWD), просто добавьте CSS position: absolute; width: 100%; z-index: -1;, чтобы он отображался в качестве фона.Затем вы можете поместить свои <canvas> вещи в div # earth, и они будут разворачиваться.Кроме того, вы можете настроить -webkit-animation-duration в файле CSS, чтобы изменить скорость анимации.Если вы не можете использовать преобразования CSS3 из-за поддержки браузера, то создать анимированные изображения или javascript практически невозможно.