CSSで画像カルーセル効果を実現_html/css_WEB-ITnose

私たちは画像カルーセルを使用しますが、これは基本的に JS を通じて行われます。現在、選択できるカルーセル プラグインは数多くあります。効果は人それぞれのニーズによって異なります。

今日は CSS を使用して画像カルーセルの効果を単純に実装します。

まず、基本的な構造と効果を記述します。フロントエンドエンジニアが詳しく書く必要があるのは、カルーセルのレイアウトです。画像については、JD ホームページのカルーセル画像を使用します。

• 

• & lt;/li & gt ;

• /1241281238/100625/fb471b02/5698a582N1c889ce3 .jpg" alt="">

2 番目のステップは、CSS を使用してページのレイアウト効果を完成させることです。#slider は、部屋にいて見ているのと同じです。この窓は窓で、窓の外の景色は下から上へ、コード名は

ul,li{

リストスタイル: なし;

マージン: 0;

パディング: 0;

}

#slider{

位置: 相対;

幅: 730px ;

高さ: 454px;

オーバーフロー: 非表示;

}

#スライダー ul{

位置: 相対;

アニメーション: anims 10 秒無限イーズインアウト代替;

}

OK、構造効果は完了しました。次に、必要なアニメーションを追加します。アニメーションが上から下に進むことはすでにわかっているので、当然、位置処理を考えます。

コード名

@keyframes anims {

0%{

top:0;

}

50%{

トップ: -454px;

}

100%{

トップ: -908px;

}

}

アニメーション コード 非常に単純ではありませんか? コード構造では、UL はこのアニメーションを使用して上から下へ、そして下から上へと循環します。完全に表示されていません (画像 GIF が大きすぎます)。デモを試すことができます。

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

「フロントエンド プログラミング開発」、「戻る」 -開発終了」、「モバイル開発」など、

学習する必要があります。グループに参加するか、WeChat にメッセージを残すことができます。

オリジナルのコンテンツです。転載する場合は出典を示してください。

パブリック WeChat アカウント: bianchengderen

QQ グループ: 186659233

皆さん、拡散して共有してください。

プログラマーの生活に統合し、彼らの思考パターンを理解し、彼らの喜びも悲しみも理解し、プログラミングする人々に注目してください。