Web 開発に関しては、目の錯覚は非常に魅力的です。当社の Web サイトで目の錯覚を使用すると、ユーザーの心を動かすことができるため、ユーザーの関心を引き付けることができます。それは私たちの脳をだまして、実際には存在しないものを信じ込ませます。これらの錯覚は、CSS のさまざまなテクニックを使用して作成できます。最も一般的に使用される錯視の 1 つは、画像スタック錯視です。これは単に奥行きの錯視です。この記事では、HTML と CSS のみを使用して画像スタック錯視を作成する手順について説明します。はじめましょう。
画像の積み重ね錯視は、透明度が異なる複数の画像を積み重ねることによって作成される視覚的な錯覚です。特定の角度から見ると、すべての画像が互いに溶け合い、立体的な画像のような錯覚を生み出します。
この効果は、以前は Photoshop を使用して行われていました。しかし、現在では HTML と CSS を使用して簡単に作成できるようになりました。
画像を含む div 要素を作成します。これが最初のスタックの表面になります。
border プロパティと box-shadow プロパティを使用して、img 要素のスタイルを設定します。
div 要素 (class="stack1") のサイズを指定します。 div 要素の位置 relative を維持して、次の疑似要素 (:before 要素と :after 要素) の position が、これらの疑似要素の位置を絶対的なものとして保持します。 div 要素を左にフローティングします。見栄えを良くするためにマージンとパディングを追加します。
属性 ":before" を使用して、スタックの最初の疑似要素を追加します。コンテンツを追加しないでください。寸法を指定し、絶対位置を指定します。背景色、ボックスの影、境界線のプロパティを使用してスタイルを設定します。
疑似要素の z-index を -1 に保ちます。上と左に異なる値を指定して、異なる位置を与え、異なる錯覚を作成します。疑似要素を回転してさまざまな効果を確認することもできます。
属性 ":after" を使用して 2 番目の擬似要素を作成します。そのスタイルは最初の疑似要素に似ています。上、左、および変換の値を変更するだけで、目の錯覚を作成できます。これで最初のスタックが完了します。
同様に、Web ページ内に必要なだけスタックを作成できます。ここでは 1 ページに 2 つのスタックを作成しました。
をそのままにし、変換値を -15px、-15px、rotate(-10deg) にします。 >:before 擬似要素、5px、0、rotate(10deg) は :after 擬似要素です。より大きなインパクトを与えるために、各疑似要素に異なる背景色を与えます。 リーリー 画像スタック錯視は Web デザインのどこで使用できますか?
画像スタック錯視は、Web 開発、広告、グラフィック デザインで広く使用されています。多くのユーザーにアピールしたため、開発者はさらにそのような目を引くビジュアルを作成するようになりました。さらに、この効果を実現するために Photoshop アプリケーションに依存しなくなりました。 HTMLとCSSだけで簡単に作成できます。この記事では、疑似クラス (
:before) を使用して、目的の結果を実現します。この記事では 6 つの異なる錯視について説明しました。ただし、さらに多くの可能性があります。ここで説明したのと同じ手順に従って、独自のビジュアルを練習して作成するだけです。
以上がHTML と CSS を使用して画像を積み重ねたような錯覚を作り出すにはどうすればよいでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
