検索

ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS を使用してカルーセルを作成するにはどうすればよいですか?

CSS を使用してカルーセルを作成するにはどうすればよいですか?

WBOY
WBOY転載
2023-08-23 12:33:051021ブラウズ

CSS を使用してカルーセルを作成するにはどうすればよいですか?

Carousel はインターネット上で非常に有名です。 Web カルーセル は、貴重な Web サイトのスペースを確保しながら、同様のコンテンツを触覚的な場所に整理するエレガントな方法です。写真の表示、商品の提供、新規訪問者の興味を引くために使用されます。しかし、それらはどれほど効果があるのでしょうか?カルーセルに対しては多くの議論があり、パフォーマンスを向上させるためにカルーセルを使用することについての研究も行われています。しかし、カルーセルはウェブサイトのユーザビリティにどのような影響を与えるのでしょうか?

この記事では、カルーセルの基本と、HTML と CSS を使用してカルーセルを作成する方法について説明します。

カルーセルとは何ですか?

カルーセルは、一連の回転するバナー/画像を表示するスライド ショーです。カルーセルは通常、Web サイトのホームページに表示されます。ウェブサイトの見栄えが向上します。スライダー、ギャラリー、スライドショーとも呼ばれる Web カルーセルを使用すると、テキスト、グラフィック、画像、さらにはビデオを動的な「スライディング」ブロックで表示できます。これらは、コンテンツとコンセプトをグループ化し、特定のコンテンツ間に視覚的なリンクを作成するための優れたデザインの選択肢です。 Web カルーセルは、電子商取引サイトで関連製品を宣伝したり、デザイン ポートフォリオで注目のプロジェクトを紹介したり、不動産 Web サイトで家の内部と外部の写真をループしたりする場合にも最適です。ただし、それらが常に最良の選択であるとは限りません。 多くのデザイナーは、読み込み時間が遅くなり、デザインの流れが台無しになるとして批判しています。ただし、デザイン関連のものと同様に、Web カルーセルを正しく実行すると、コンテンツを簡単に移動できるように分割できます。

Web ページのカルーセルを作成するにはどうすればよいですか?

ここでは、Bootstrap のようなフレームワークを使用せずに単純な Web カルーセルを作成する方法を見ていきます。

従うべき手順

HTML を使用して、画像を含む走灯の基本構造を作成します。以下の例では、回転ドアに 4 つの画像を追加しました。また、ボタンが 4 つあり、クリックすると対応する画像が表示されます。

  • まず、

    title
    • と
  • content

    を含む div 要素をコンテナとして作成します。 これで、

    content
    • div には 2 つの部分が含まれます -
  • carousel content

    (トランジション全体を通じて固定されたままになるテキスト部分が含まれます) と slideshow (可動部分、つまり 4 つの画像とボタンが含まれます)。 CSS を使用してカルーセル画像とボタンのスタイルを設定します。スライドの位置を相対的な位置として保持します。

  • CSS アニメーションを使用して、カルーセル内の画像をスムーズに切り替えます。

  • Example

    の中国語訳は次のとおりです:
    • Example

次の例は、4 つの画像と画像の表示を制御するボタンを含むカルーセルを示しています。これらの画像は一定の間隔でトランジション表示されます。

リーリー

CSS 変換プロパティ

ビジュアル フォーマット モデルで使用される座標空間を変更するには、CSS のtransform プロパティを使用します。これにより、要素に傾き、回転、移動などの効果を適用できます。

＃＃＃文法＃＃＃ リーリー

値

translate(x, y)

    -この関数は、X 座標と Y 座標に沿った移動を定義します。

  • translate3d(x, y, z)

    • -この関数は、X、Y、Z 座標軸に沿った変換を提供します。

  • initial

    • - 要素をデフォルト値に設定します。

  • inherit

    • - 親要素の値を継承します。

  • CSSアニメーション CSS のアニメーション プロパティを使用すると、要素のさまざまなスタイル属性を一定の時間内に変更して、要素にアニメーション効果を追加できます。

    • アニメーションのいくつかの特徴は次のとおりです:

Animation-name

    - アニメーションの名前を指定できます。これは、後で @keyframes によってアニメーションを実行するための CSS ルールを指定するために使用されます。

  • アニメーション期間

    • - アニメーションの期間を設定します

  • アニメーション時間関数

    • - アニメーションの速度曲線、つまり、アニメーションが CSS カスタム プロパティの 1 つのセットから別のセットに変更するのに使用される時間間隔を表します。 。

  • アニメーション遅延

    • – 指定された時間間隔内の開始値の遅延を設定します

  • @keyframes は、指定された期間内にアニメーションで実行する必要があるコードを指定するために使用されます。これは、アニメーション中に特定の「フレーム」の CSS プロパティを 0% (アニメーションの開始) から 100% (アニメーションの終了) までの範囲のパーセンテージで宣言することによって実現されます。

以上がCSS を使用してカルーセルを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

css bootstrap html 循环 继承 transform animation
声明：
この記事はtutorialspoint.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。
前の記事：CSS でのネストとグループ化の説明次の記事：CSS でのネストとグループ化の説明

関連記事

続きを見る