Ho la seguente sito che è in Flash con ingranaggi a rotazione in background:Come posso creare un pignone rotante con CSS3 e jQuery?
http://thedrivepartnership.com/index.html
Vorrei creare qualcosa di simile utilizzando CSS e JavaScript - Se uno sa di eventuali esempi là fuori?
Suppongo che ciò che si potrebbe fare è creare un contenitore che si riempie la finestra, quindi posizionare i vostri ingranaggi in tale contenitore.
Ad esempio, è possibile posizionare un contenitore contenente l'animazione nella parte superiore del file con uno z-index molto basso che si adatta alla finestra e ha una posizione fissa. Metterai in risalto i tuoi contenuti e fai finta che css4 sia appena uscito con il supporto per gli sfondi .avi. Stavo solo scherzando. Codice:
<body>
<div id="cogs">
// Your awesome cog pictures
</div>
<div id="content">
// Your awesome content
</div>
</body>
Il CSS per il contenitore di animazione potrebbe essere simile a questo:
#cogs {
width: 100%;
height: 100%;
position: fixed;
text-align: center;
overflow: hidden;
z-index: -100;
}
il CSS di animazione basato funziona in questo modo, ma con vari vendor prefix:
@keyframes rotateCogOne {
0% {
-webkit-transform:rotate(0deg);
}
100% {
-webkit-transform:rotate(360deg);
}
}
E poi si applica l'animazione in questo modo:
#cogOne {
animation: rotateCogOne 60s infinite linear;'
// which means...
animation: [name], [duration], [repeat], [easing]
}
Senza lo scripting di un'animazione all'interno di un elemento canvas, penso che sarete abbastanza limitati. In particolare, scalare l'animazione per adattarsi a risoluzioni diverse sarà difficile (Impossibile?) Con css e html rigorosi. Può ancora sembrare bello, quindi forse soddisfa ancora le tue esigenze. Inoltre, dove l'animazione non è supportata, puoi comunque avere una fantastica gamma di ingranaggi in background o semplicemente tornare all'animazione basata su javascript.
Ho riunito un basic example di come si potrebbe fare con css e html. Here it is full screen. Ci sono altri aspetti che penso ... Questo è decisamente incompleto ... Ma si spera che un passo nella giusta direzione. Potresti estendere gli stessi metodi a più marce per assomigliare ulteriormente alla tua pagina attuale.
Se si dovesse seguire questa strada (e non sono sicuro di averlo consigliato), sarebbe meglio progettare l'animazione con una risoluzione che andasse bene in un intervallo intorno a 800x600 fino a forse 1400x100. Se hai delle statistiche, segui la dimensione della finestra più comune degli utenti.
ho paura che prima tela-tag di HTML5 è necessario utilizzare GIF ..
EDIT: Gratta l'ultimo .. Visualizza: http://css-tricks.com/examples/CSS3Clock/ Questo sarà molto probabilmente aiutare.
rotante è un 2D trasformare, in modo da qualcosa come:
.cog {
height: 100px; width: 100px;
transform: rotate(180deg);
animation-duration: 10s;
}
Prova questa in Chrome. Questo è specifico per i browser webkit, Chrome e Safari. Sostituisci "-webkit" con "-moz" per Mozilla e "-o" per Opera. O semplicemente rimuovilo per le versioni più recenti del browser.
.cog{
-webkit-animation-name: spin;
-webkit-animation-duration: 60000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-timing-function: linear;
}
o
.cog{
animation-name: spin;
animation-duration: 60000ms;
animation-iteration-count: infinite;
animation-direction: normal;
animation-timing-function: linear;
}
È possibile utilizzare spinning cog icon di font-awesome, a meno che non si desideri utilizzare le proprie immagini.
L'icona font-awesome può essere implementata con <i class="fa fa-cog"></i> dopo aver aggiunto font-awesome al progetto.
[flag] Sì, questa è una bella cosa da fare, un grande ticchettio. Ma è una lunga strada da una risposta alla domanda dell'OP. –