css3を使用して羽ばたく蝶を作成するコード

この記事では、純粋な CSS3 を使用して蝶が羽ばたく例についての関連情報を主に紹介します。内容が非常に優れているので、参考として共有します。

純粋な CSS3 で羽ばたく蝶を作成します。まず効果を見てみましょう

、効果は悪くありません

コードをアップロードします

css

れーれー

ここで以前にいくつかの CSS プロパティを紹介しました

@keyframes

@keyframes ルールを通じて、アニメーションを作成できます

1. アニメーション作成の原則は、CSS スタイルの 1 つのセットを別のセットに徐々に変更することです。スタイルの数

2. 変更が発生する時間をパーセンテージで指定するか、0% と 100% に相当するキーワード「from」と「to」を使用して指定します。

3. 0% はアニメーションの開始時間、100% はアニメーションの終了時間です

4. transform:rotateY()

変換プロパティは要素に 2D または 3D 変換を適用します。このプロパティにより、要素を回転、拡大縮小、移動、または傾けることができます。

1. rotateY() は、Y 軸に沿った 3D 回転を定義します。

この図は、xyz 軸を非常に直感的に示しています。実際、3DS MAX などの 3D モデリング ソフトウェアを学習した学生は、これら 3 つの軸の方向に精通しているはずです。

実装アイデア: まず、ソン・ジュエ・ファーザー・フェーズを使用して、左翼、右翼、胴体を絶対的に配置し、それらを組み合わせます。次に、トランスフォームの回転 Y を使用して、それらを Y 軸に沿って回転させます。ここで @keyframe アニメーションを使用します。そしてアクションを繰り返します。

また、transform-style:preserve-3d; 属性にも注目したいと思います。w3c の説明は、変換されたサブ要素が 3D 変換を保持できるようにすることです。つまり、すべてのサブ要素は 3D 空間で表示されます。逆に、フラットに設定すると、すべてのサブ要素が 2D 空間で表示されます。皆様の学習に役立つ PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

バルーンスタイル効果を実現するにはcss3を使用します

CSS3を使用してWeChatのようなチャットバブルを実装します

HTMLとCSS3を使用してハートビートの実装方法をシミュレートします

以上がcss3を使用して羽ばたく蝶を作成するコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。