HTML と CSS を使用して画像の折り目効果を作成するにはどうすればよいですか?-htmlチュートリアル-php.cn

HTML と CSS を使用して画像の折り目効果を作成するにはどうすればよいですか?

WBOY

リリース： 2023-09-15 21:41:02

転載

1605 人が閲覧しました

HTML と CSS を使用して画像の折り目効果を作成するにはどうすればよいですか?

今日のデジタル時代では、視覚的に魅力的でインタラクティブなユーザーインターフェイスを作成することが Web デザインの重要な側面になっています。最近の Web サイトでよく使用される効果の 1 つは、画像の折り畳み効果です。この効果は、Web サイトに画像を表示するユニークで魅力的な方法を提供します。画像の折り畳み効果の芸術は、現代のデジタルアーキテクチャの基本的な構成要素である HTML と CSS のアプリケーションを通じて作成できます。この投稿では、HTML と CSS を使用して画像の折り畳み結果を部分的に構築する方法を説明します。この記事を読むと、この効果を達成し、Web サイトを目立たせる方法をしっかりと理解できるようになります。

変換プロパティ

CSS のtransform プロパティは、HTML 要素の形状、位置、サイズを変更するために使用されます。これにより、ソフトウェアエンジニアは、コンポーネントの配置、回転、ねじれ、サイズ、その他の光学特性を変更できます。変換は、移動、回転、傾斜、振幅などの 2D および 3D 変形操作を利用して実行されます。トランジションプロパティは、すべての最新の Web ブラウザとシームレスに連携し、ユーザーエンゲージメントやインタラクションを引き起こす動的でアニメーション化されたビジュアルコンポーネントを生成するために使用できます。変換されたコンポーネントは、その固有のサイズ、輪郭、および位置を維持し、他の隣接するコンポーネントは変換されたコンポーネントに適応します。これは、ページ上の他の要素のレイアウトに影響を与えることなく、Web ページ上の要素を操作するための優れた方法です。

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

関数

は次のいずれかになります&miinus;

translate()
- x 軸と y 軸に沿って要素を移動します。
rotate()
- 要素を原点を中心に回転させます。
scale()
- 要素のサイズを拡大または縮小します。
skew()
- x 軸または y 軸に沿って要素をねじります。
matrix()
- 複数の変換を 1 つの変換に結合します。

Value

は、使用している特定の関数によって異なります。たとえば、translate() 関数を適用することを選択した場合、この値は translation(x, y) として表すことができます。ここで、x と y の数値は、要素を移動するために必要なピクセル数を表します。方向。横軸と縦軸。 :N 番目のサブセレクター

:nth-child と呼ばれる CSS セレクターは、祖先要素内の順序位置に基づいて要素を選択するために使用されます。これにより、昇順コンポーネントに含まれる特定の若々しいコンポーネントを特定し、その若々しいコンポーネントにスタイル属性を割り当てることができます。 :nth-child 識別子は、アルゴリズムを使用して、どの子コンポーネントを選択する必要があるかを決定します。たとえば、:nth-child(2) を使用して親要素の後続の子要素を選択したり、:nth-child(even) を使用して偶数スロットを占有するすべての後続要素を選択したりできます。

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

a と b は整数、n は正の整数 (1 から始まる) です。＃＃＃方法＃＃＃

画像に画像の折り目効果を作成するには、まず画像をさまざまな部分に分割する必要があります。

要素を使用して画像のさまざまな部分を保存します。ここで別のセクションを選択するには、

タグを選択します。上で説明した :nth-child セレクターを使用します。最後に、各画像を何らかの方法で変換して折り紙効果を作成します。

次のコードは本質的に、視覚的に魅力的なインタラクティブな画像折りたたみ効果を作成するために使用できる HTML および CSS プログラムです。これは、さまざまな宣言やディレクティブを通じて機能し、実行されると、視覚的に魅力的かつ動的な方法で折りたたまれたように見える画像をレンダリングします。 HTML コードは doctype 宣言で始まり、HTML ドキュメントの開始、エフェクトヘッダーを含むヘッダー、および style タグの宣言が続きます。次は body タグで、タイトルと子要素の順序なしリストが含まれます。次に、CSS を使用してリストのスタイルを設定し、それぞれに折りたたみ効果を持つ 4 つの子要素のコンテナーを含む効果を作成します。

CSS コードには、順序なしリストのスタイルを設定し、マージン、パディング、コンテナーの位置などの詳細を指定する一連の命令が必要です。さらに、折り目効果の背景画像としてカラーグラデーションを適用します。次に、コンテナのサイズ、位置、表示プロパティを指定します。スタイルには、アニメーションの全体的な効果に寄与するトランジションとボックスシャドウの仕様も含まれます。

さらに、ユーザーがコンテナーの上にマウスを移動すると、skewY() 変換プロパティが適用されてコンテナーの子要素が交互に配置され、半分に折りたたまれた画像の外観をシミュレートする動的な効果が作成されます。 nth-child() 属性を使用すると、skewY() 変換を適用する代替の子要素を選択するのに役立ちます。要約すると、さらに nth-child() 属性を使用して各子コンポーネントの背景ポーズを指定することで、折り畳みプロセス中に画像の各フラグメントを正確に構成できるようになります。＃＃＃例＃＃＃

この例で説明する完全なコードは次のとおりです -

<!DOCTYPE html>
<html>
<head>
   <title>How to create Image Folding Effect using HTML and CSS?</title>
   <style>
      body {
         margin: 0;
         padding: 0;
      }
      .container {
         margin: 10;
         padding: 0;
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%,-50%);
         width: 480px;
         height: 270px;
         display: flex;
      }
      .fold {
         list-style: none;
         width: 25%;
         background-image: linear-gradient(yellow,orange,red);;
         background-size: cover;
         height: 100%;
         transition: 0.5s;
      }
      .container:hover .fold:nth-child(odd) {
         transform: skewY(15deg);
         box-shadow: inset 20px 0 50px rgba(0,0,0, .5);
      }
      .container:hover .fold:nth-child(even) {
         transform: skewY(-15deg);
         box-shadow: inset 20px 0 50px rgba(0,0,0, .5);
      }
      .container .fold:nth-child(1) {
         background-position: 0;
      }
      .container .fold:nth-child(2) {
         background-position: -120px;
      }
      .container .fold:nth-child(3) {
         background-position: -240px;
      }
      .container .fold:nth-child(4) {
         background-position: -360px;
      }
   </style>
</head>
<body>
   <h4>How to create Image Folding Effect using HTML and CSS?</h4>
   <ul class="container">
      <li class="fold"></li>
      <li class="fold"></li>
      <li class="fold"></li>
      <li class="fold"></li>
   </ul>
</body>
</html>

ログイン後にコピー

结论

最终，折叠图像印象构成了一个简单但有效的工具，可以将交互性和视觉吸引力融入您的网站。通过遵守本说明中阐述的规定程序，人们可以轻松地使用 HTML 和 CSS 产生这种印象。无论您是新手还是熟练的程序员，本文都为您提供了在网站上实现图像折叠效果所需的知识和材料。通过一点创造力和实验，您可以自定义效果以满足您的特定设计需求并增强访问者的用户体验。所以，今天就开始创建您自己的图像折叠效果吧！

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