ホームページ > 記事 > ウェブフロントエンド > CSSで画像カルーセル効果を実現_html/css_WEB-ITnose
私たちは画像カルーセルを使用しますが、これは基本的に JS を通じて行われます。現在、選択できるカルーセル プラグインは数多くあります。効果は人それぞれのニーズによって異なります。
今日は CSS を使用して画像カルーセルの効果を単純に実装します。
まず、基本的な構造と効果を記述します。フロントエンドエンジニアが詳しく書く必要があるのは、カルーセルのレイアウトです。画像については、JD ホームページのカルーセル画像を使用します。
ff6d136ddc5fdfeffaf53ff6ee95f185
25edfb22a4f469ecb59f1190150159c6
8aa2918506a11e8a886e85949f1eb079
66c95237f06fa1afda143de469651288
4a11e5928b3688cf38c9163b657eb5ac
bed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6
& lt;/li & gt ;
25edfb22a4f469ecb59f1190150159c6
8aa2918506a11e8a886e85949f1eb079 /1241281238/100625/fb471b02/5698a582N1c889ce3 .jpg" alt=""> 5db79b134e9f6b82c0b36e0489ee08ed
bed06894275b65c1ab86501b08a632eb
1b72c4dea11be3a03593b53680cbf161
2 番目のステップは、CSS を使用してページのレイアウト効果を完成させることです。#slider は、部屋にいて見ているのと同じです。この窓は窓で、窓の外の景色は下から上へ、コード名は
ul,li{リストスタイル: なし;
マージン: 0;
}
#slider{
位置: 相対;
幅: 730px ;
高さ: 454px;
オーバーフロー: 非表示;
}
#スライダー ul{
位置: 相対;
アニメーション: anims 10 秒無限イーズインアウト代替;
}
OK、構造効果は完了しました。次に、必要なアニメーションを追加します。アニメーションが上から下に進むことはすでにわかっているので、当然、位置処理を考えます。
コード名
@keyframes anims {
0%{
top:0;
50%{
トップ: -454px;
}
100%{
トップ: -908px;
}
}
アニメーション コード 非常に単純ではありませんか? コード構造では、UL はこのアニメーションを使用して上から下へ、そして下から上へと循環します。完全に表示されていません (画像 GIF が大きすぎます)。デモを試すことができます。
プログラマーはオンラインでトレーニングされています
「フロントエンド プログラミング開発」、「戻る」 -開発終了」、「モバイル開発」など、学習する必要があります。グループに参加するか、WeChat にメッセージを残すことができます。
オリジナルのコンテンツです。転載する場合は出典を示してください。