css3 を使用して風車効果を実現する_html/css_WEB-ITnose

CSS3 は JS によって実現される多くの効果を置き換えることができると述べました。実際、多くの場合、純粋な CSS3 は、CSS3 を使用していくつかの単純な画像を直接描画することもできます。 CSS3 で描画された画像の効果は、画像を直接使用する場合ほど良くないかもしれませんが、実装がより複雑になるのは、画像ほど直接的で実用的ではない互換性の問題です。しかし、別の方法で問題の解決策を考えることは、私たちにインスピレーションを与え、CSS3 の学習に役立つことがよくあります。

以下のデモでは、風車の効果を写真と純粋な CSS3 で比較します。

最初に静的レンダリングを見てみましょう:

純粋な CSS3 によって実現される風車のアニメーション レンダリング

以下は、純粋な CSS3 を使用して風車のアニメーション効果を実現する方法の簡単な紹介です

1 . 風車の柱を描きます

風車の柱が正台形であることがわかります。幅、高さの属性、境界線を通じて、三角形、台形などのさまざまな幾何学的形状を実現できます。以下の台形実装方法を参考に、他のグラフィック実装を試してみてください。

表示: ブロック;
高さ: 0;
ボーダー幅: 0 4px 80px 4px;
ボーダーカラー: 透明透明な白;
レンダリング

効果を実現するための風車の柱

2. 風車の軸を描画します

この手順は比較的単純で、border-radius フィレット属性を使用して簡単に実現できます。

幅:4px;

ボーダー:3px

背景:#a5cad6;

レンダリング
3. 風車軸実現効果
5. 3. 風車の葉を描画します

風車の葉の実現は、台形が反転していることを除いて、柱の実現と同じです。

高さ: 0;

幅: 2px;

border-color: 白 透明

4. 風車ページを配置します

これは、CSS3 の変換の回転関数を使用して実現されます。注意すべき点は、回転を使用する場合、まず原点を使用して回転した円の中心を配置する必要があるということです。デフォルトは中心です。ここでは要素の上部に配置する必要があります。
-webkit-transform-origin:0px 0px;
レンダリング

Windmill ファンページの実装効果

上記の方法を使用して順番に描画します3 つの風車ファンが適切な角度で配置されています。

5. ファン ページの動的な効果を実現する

静止した風車が描画され、次に行う必要があるのは、それを動かすことです。
先ほど、ファン ページを axis 要素の子要素に配置できたので、それに応じてファン ページを移動させるには、軸の回転効果を実現するだけで済みます。

以下はアニメーションの実装です

@-webkit-keyframesrotate{from{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(360deg)}}

implementアニメーション メソッド回転を axis 要素に入れると、ファン ページが動き始めることができます。

-webkit-animation: 4 秒リニア無限回転

6. 効果を改善し、互換性を実現します

これまでのところ、私たちの風車は基本的に完成しており、前のコードは Webkit コア ブラウザーと互換性があります。 (chrome、safari)、次に他のブラウザとの互換性を実現し、回転を速くするためにマウスホバー効果を追加して、風車が完成しました。

css3 のパフォーマンスはブラウザによって異なります。最も効果的なのは Chrome ブラウザです。風車の柱にピクセルの歪みの問題が発生します (Webkit のコアも同じですが、パフォーマンスが低下する理由はわかりません)。は大きく異なります）。将来的にはこの問題の解決に努めます。
デモとダウンロードアドレスは以下にあります

css3 によって達成される風車効果

ダウンロード

(