CSS を使用してパラドックス効果を作成するにはどうすればよいですか?-CSSチュートリアル-php.cn

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

WBOY

リリース： 2023-09-02 22:21:06

転載

1542 人が閲覧しました

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 つの状態の間で滑らかなアニメーションを作成します。