CSS アニメーション: 左開き、右下、右上、左上_html/css_WEB-ITnose

関連する知識ポイントを忘れないように、主にアニメーションの関連プロパティに慣れるために、アニメーションの例を続けましょう。左下、右下、の 4 つの開口部を実装しましょう。右上と左上にアニメーションを配置します。

ここには 2 つのエフェクトのみを配置します。OK、いつものようにコードを追加します。

最初はHTML構造です コード、2つのBOX、1つの外側のBOX、1つの内側のBOX、外側のBOXには枠線があり、内側のBOXには緑色の背景があります

コード名

<div class="outer_box">    <div class="inner_box"></div> </div>

BOX 関連する CSS コード。この属性は、アニメーション変換の元のポイントを設定するために使用されます。実際には、これら 4 つのアニメーションが主にこのポイントの制御に使用されます。

.outer_box {     width: 200px;    height: 200px;    border: #bbb 5px solid;    margin: 200px auto;}.inner_box {    background-color: #44b549;    width: 100%;    height: 100%;    animation: open_top_left 2s infinite;    transform-origin: 0 0;}

さて、アニメーション コードを貼り付けましょう。実際、アニメーションのプロパティを知っている場合、次のコードは説明する必要がありません。コード名

@keyframes open_down_left { / *オリジナルポイント 0 100% */

from {

transform: 回転(0deg);

}

へ {

変換: 回転(-120度);

}

}

@keyframes open_down_right { /*元の点: 100% 100%*/

from {

transform:rotate(0deg);

}

to {

transform:rotate(120deg);

}

}

@keyframes open_top_left { /* 原点 0 0*/

from {

変換: 回転(0度);

}

から {

変換: 回転(120度);

}

}

@keyframes open_top_right { /*元のポイント 100% 0*/

from {

transform: 回転(0度);

}

to {

transform: 回転(-120deg);

}

}

元の点をマークしましたコード内で、元のポイントを内側のボックスに変更するだけで、アニメーション名を変更することで、これら 4 つのアニメーションを表示できます。必要に応じて、これら 4 つのアニメーションの例はこれで終わりです。さらに追加する場合は、コードを変更してみることができます。

プログラミング人材はオンラインでトレーニングされています

「フロントエンド プログラミング開発」、「バックエンド 開発」、「モバイル開発」など。

学習が必要な方は、グループに参加するか、WeChat にメッセージを残してください。

オリジナル コンテンツの出典を示して転載してください。

公開 WeChat アカウント: bianchengderen

QQ グループ: 186659233

皆さんの拡散と共有を歓迎します。

プログラマーの生活を統合し、彼らの思考パターンを理解し、彼らの喜びと悲しみを理解し、プログラミングする人々に注意を払います。