Как мне создать вращающуюся шестерню с CSS3 и jQuery? - PullRequest
Новая
       37

Как мне создать вращающуюся шестерню с CSS3 и jQuery?

6 голосов
/ 24 ноября 2011

У меня есть следующий сайт, который находится во Flash с вращающимися винтами на заднем плане:

http://thedrivepartnership.com/index.html

Я хотел бы создать нечто подобное, используя CSS и JavaScript - кто-нибудь знает какие-нибудь примеры?

Ответы [ 5 ]

5 голосов
/ 24 ноября 2011

Полагаю, вы могли бы создать контейнер, который заполняет окно, а затем поместить ваши шестерни в этот контейнер.

Например, вы можете поместить контейнер с анимацией в верхнюю часть файла с помощьюочень низкий z-индекс, который соответствует окну и имеет фиксированное положение.Вы бы поместили ваш контент поверх и сделали вид, что css4 только что получил поддержку .avi фонов.Просто шучу.Код: 

<body>
    <div id="cogs">
        // Your awesome cog pictures
    </div>
    <div id="content">
        // Your awesome content
    </div>
</body>

CSS для контейнера анимации может выглядеть следующим образом: 

#cogs {
    width: 100%;
    height: 100%;
    position: fixed;
    text-align: center;
    overflow: hidden;
    z-index: -100;
}

Анимация на основе CSS работает следующим образом, но с различными префиксами поставщика: 

@keyframes rotateCogOne {
    0% {
        -webkit-transform:rotate(0deg);
    }
    100% {
        -webkit-transform:rotate(360deg);
    }
}

И затем вы применяете анимацию следующим образом: 

#cogOne {
    animation: rotateCogOne 60s infinite linear;'
    // which means...
    animation: [name], [duration], [repeat], [easing]
}

Без сценариев анимации в элементе canvas я думаю, что вы будете довольно ограничены.В частности, масштабирование анимации для соответствия разным разрешениям будет затруднено (Невозможно?) При строгом CSS и HTML.Хотя он все еще может выглядеть круто, так что, возможно, он все еще отвечает вашим потребностям.Кроме того, там, где анимация не поддерживается, вы все равно можете иметь крутой массив шестеренок на заднем плане или просто вернуться к анимации на основе JavaScript.

Я собрал базовый пример о том, как вы могли бы сделать это с CSS и HTML. Здесь это полный экран .Я думаю, что есть и другие проблемы ... Это определенно неполно ... Но, надеюсь, шаг в правильном направлении.Вы можете распространить те же методы на большее количество передач, чтобы они больше напоминали вашу текущую страницу.

Если бы вы выбрали этот маршрут (и я не уверен, что рекомендую его), было бы лучше создать анимацию наразрешение, которое выглядело хорошо в диапазоне от 800x600 до, возможно, 1400x100.Если у вас есть статистика, выберите самый распространенный размер окна у ваших пользователей.

2 голосов
/ 24 ноября 2011

Попробуйте это в Chrome. Это характерно для браузеров webkit, Chrome и Safari. Замените «-webkit» на «-moz» для Mozilla и «-o» для Opera. Или просто удалите его для новейших версий браузера. 

.cog{
    -webkit-animation-name: spin;
    -webkit-animation-duration: 60000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-timing-function: linear;
}

или 

 .cog{
    animation-name: spin;
    animation-duration: 60000ms;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-timing-function: linear;
}
0 голосов
/ 07 июля 2014

Вы можете использовать значок вращающегося винтика font-awesome , если только вы не хотите использовать свои собственные изображения.

Значок font-awesome может быть реализован с помощью <i class="fa fa-cog"></i> после того, как вы добавили font-awesome в свой проект.

0 голосов
/ 24 ноября 2011

Вращение - это двумерное преобразование, поэтому что-то вроде: 

.cog {
    height: 100px; width: 100px;
    transform: rotate(180deg);
    animation-duration: 10s;
}
0 голосов
/ 24 ноября 2011

Боюсь, что перед HTML-тэгом canvas вам нужно будет использовать GIF-ы ..

РЕДАКТИРОВАТЬ: Поцарапать последний .. См .: http://css -tricks.com / examples / CSS3Clock / Это, скорее всего, поможет вам.

...