CSSアニメーション: (スライドダウン) スライドダウンeffect_html/css_WEB-ITnose

一般的なフォーカス画像ジャンプの効果を実現するために、前の記事の HTML コード構造を使用します。

HTML

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

CSS

.outer_box {

幅: 100px;

高さ: 100px;

ボーダー: #bbb 5px ソリッド;

マージン : 200px auto;

}

.inner_box {

背景色: #44b549;

幅: 100%;

高さ: 100%;

位置: 相対;

アニメーション: slide_down 2 秒線形無限;

変換原点: 200% 100%;

}

フォーカス画像のジャンプには、徐々に消えたり、3D 効果に変換したり、徐々に縮小したり、下にスライドして消えたりするなど、さまざまな効果があります。

方向を見てみましょう。スライドダウンの効果 このエフェクトは主に位置に依存し、必要に応じて上、左、下、右の 4 つの方向の値を制御します。上部の属性値、上部は 0 からボックス全体の高さまでの範囲になります。

コード名

@keyframes slide_down {

から {

トップ: 0;

}

から {

トップ: 100%;

}

}

CSS コードは非常に単純ですか? 最終的な効果は次のとおりです。

その他の効果 (スライドなど)右にスライド、左にスライド、上にスライドなど、既存のコードで処理を行うことができます。

この記事は Wu Tongwei のブログ、

WeChat 公開アカウント: bianchengderen、QQ グループに属します。 : 186659233

転載する場合は出典と対応リンクを明記してください: http://www.wutongwei.com/front/infor_showone.tweb?id=200、皆さんも拡散と共有を歓迎します。 >