6

私は、バックグラウンドで回転する歯車を備えたFlashにある次のサイトを持っています：

http://thedrivepartnership.com/index.html

CSSとJavaScriptを使用して同様の何かを作成したいと思います-誰かがそこにある例を知っていますか？

4

5 に答える 5

5

あなたにできることは、窓を埋めるコンテナを作成し、そのコンテナにギアを配置することだと思います。

たとえば、アニメーションを保持するコンテナをファイルの上部に配置し、ウィンドウに収まり、位置が固定された非常に低いz-indexを使用することができます。コンテンツを一番上に配置し、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]
}

キャンバス要素内でアニメーションのスクリプトを作成しないと、かなり制限されると思います。特に、異なる解像度に合うようにアニメーションをスケーリングすることは、厳密なcssとhtmlでは困難です（不可能ですか？）。それでもかっこよく見えるので、おそらくそれでもあなたのニーズを満たしています。また、アニメーションがサポートされていない場合でも、バックグラウンドでクールなギアの配列を使用することも、JavaScriptベースのアニメーションにフォールバックすることもできます。

cssとhtmlでそれを行う方法の基本的な例をまとめました。こちらは全画面表示です。私が思うにさらに問題があります...これは間違いなく不完全です...しかし、うまくいけば正しい方向への一歩です。同じ方法をより多くのギアに拡張して、現在のページにさらに似せることができます。

このルートを使用する場合（そして、私がそれをお勧めするかどうかはわかりませんが）、800x600からおそらく1400x100の範囲で見栄えのする解像度でアニメーションを設計するのが最善です。統計がある場合は、ユーザーの最も一般的なウィンドウサイズで確認してください。

于 2011-11-24T18:06:29.460 に答える
2

Chromeでこれを試してください。これは、Webkitブラウザー、Chrome、Safariに固有のものです。「-webkit」をMozillaの場合は「-moz」に、Operaの場合は「-o」に置き換えます。または、最新のブラウザバージョンの場合は削除してください。

.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;
}
于 2011-11-24T12:28:17.310 に答える
0

HTML5のcanvas-tagの前に、GIFを使用する必要があるのではないかと思います。

編集：最後のものをスクラッチします。参照：http ：//css-tricks.com/examples/CSS3Clock/これはおそらくあなたを助けるでしょう。

于 2011-11-24T12:08:52.030 に答える
0

回転は2D変換なので、次のようになります。

.cog {
    height: 100px; width: 100px;
    transform: rotate(180deg);
    animation-duration: 10s;
}
于 2011-11-24T12:20:54.153 に答える
-1

独自の画像を使用する場合を除いて、 font-awesomeの回転する歯車アイコンを使用できます。

<i class="fa fa-cog"></i>font-awesomeアイコンは、font-awesomeをプロジェクトに追加した後に実装できます。

于 2014-07-07T01:17:49.083 に答える