検索

ホームページ  >  記事  >  ウェブフロントエンド  >  CSS を使用してパラドックス効果を作成するにはどうすればよいですか?

CSS を使用してパラドックス効果を作成するにはどうすればよいですか?

WBOY
WBOY転載
2023-09-02 22:21:061537ブラウズ

CSS を使用してパラドックス効果を作成するにはどうすればよいですか?

パラドックス効果は、オブジェクト、要素、またはテキストの視覚的な錯覚を作成し、矛盾した方向に動いているように見せるために使用される視覚効果です。この効果を使用すると、Web ページに楽しくユニークな要素を追加できます。

これは HTML と CSS を使用して簡単に作成できます。この記事では、CSS を使用して逆説効果を作成するために必要なテクニックとプロパティについて説明します。まず、2 つの CSS プロパティを同時に組み合わせて簡単な逆説を作成し、次に、CSS アニメーションを使用して複雑な逆説的な効果を作成できる、より高度なテクニックを学びます。

この記事を読み終えるまでに、あなたは自分の Web ページ上に魅力的で視覚的に魅力的なパラドックス効果を作成するための知識とスキルを習得できるでしょう。

逆説的な効果を生み出す

CSS を使用すると、矛盾する CSS プロパティを使用することで相反する効果を実現でき、その結果、視覚的な矛盾や予期しない動作が発生することがあります。ここではいくつかの例を示します。

Example

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

Example

ここでは、float と clear、text-align と vertical-align、transform と transition ## などの CSS プロパティの組み合わせを使用します。 # など、いくつかの相反する効果が作成されます。従うべき手順は次のとおりです −

  • div、span、ボタン要素を作成します。

  • CSS を使用してスタイルを設定します。

  • div 要素には float プロパティと clear プロパティを使用し、span 要素には text を使用します-align および vertical-align プロパティ。button, には、transform および transition.

    を使用します。
    • リーリー

  • div 要素は左側にフローティングされ、その後両側でクリアされるため、フローティングではなくなります。これは、float プロパティと clear プロパティを使用することで実現できます。どの要素についても、float の値を left として、clear の値を both として保持します。これにより、要素は浮動状態のままになります。 、両側がクリアされると、結果の要素はフローティング状態ではなくなります。

  • #text-align

    と vertical-align を使用すると、逆説的な効果が生じる可能性もあります。span 要素には、テキストが水平方向に中央揃えで配置されますが、上部が垂直になるため、テキストが中心からずれて表示されます。

  • transform

    および transition プロパティを使用します。最初、button 要素は 180 度回転されますが、マウスオーバー時に transition プロパティを使用して 0 度に回転し、2 つの状態の間で滑らかなアニメーションを作成します。

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

Example

移動背景、静的コンテンツ: この効果は、コンテンツを静的に保ちながら要素の

background-position

プロパティをアニメーション化することで実現できます。従うべき手順は次のとおりです:

    背景画像のコンテナ div 要素を作成します。その中に、コンテンツまたはテキストを含む別の div 要素を作成します。

    • 背景画像のサイズを指定します。同時に、
  • background-size

    を cover として、overflow を hidden として保持します。

    • コンテンツを背景に合わせて中央揃えにします。

    • 次に、CSS アニメーションを使用して、背景の背景位置をアニメーション化します。背景の位置を (0 0) から (100% 0) まで指定すると、背景が X 軸に沿って移動します。

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

Example

固定コンテンツ、移動境界: コンテンツは静止したままで、境界プロパティをアニメーション化することでこの効果を作成できます。従うべき手順は次のとおりです −

    背景画像のコンテナ div 要素を作成します。その中に、コンテンツまたはテキストを含む別の div 要素を作成します。

    • 背景画像のサイズを指定します。また、
  • position

    を relative として、overflow を hidden として保持します。

    • コンテンツを背景に合わせて中央揃えにします。

    • 次に、CSS アニメーションを使用して背景の境界線をアニメーション化します。ホバリングすると、境界線のサイズが 0px から 20px に増加し、その後 0 に戻ります。

  • リーリー
    • 上の例では、コンテンツと背景は静止したままですが、境界線は移動します。
＃＃＃結論は＃＃＃

さまざまな CSS プロパティを使用すると、Web ページに独自のパラドックス効果を作成できます。これにより、Web サイトがユーザーフレンドリーになり、人気が高まります。このようなビジュアルを作成すると、ユーザーの注目を集め、動的な Web サイトの作成に役立ちます。

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

css html Float for using this position overflow border background transform transition animation
声明：
この記事はtutorialspoint.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。
前の記事：CSS ナビゲーション右プロパティ次の記事：CSS ナビゲーション右プロパティ

関連記事

続きを見る