Bagaimana untuk mencipta kesan lipatan imej menggunakan HTML dan CSS?

Dalam era digital hari ini, mencipta antara muka pengguna interaktif yang menarik secara visual telah menjadi aspek penting dalam reka bentuk web. Salah satu kesan popular yang digunakan dalam laman web moden ialah kesan lipatan imej. Kesan ini menyediakan cara yang unik dan menarik untuk memaparkan imej di tapak web anda. Seni kesan lipatan imej boleh dicipta melalui aplikasi HTML dan CSS, yang merupakan blok binaan asas seni bina digital kontemporari. Dalam siaran ini, kami akan membimbing anda membina hasil lipatan imej sekeping demi sekeping menggunakan HTML dan CSS. Selepas membaca artikel ini, anda akan mempunyai pemahaman yang kukuh tentang cara mencapai kesan ini dan menjadikan tapak web anda menonjol.

Atribut penukaran

Properti transformasi dalam CSS digunakan untuk membuat perubahan pada bentuk, kedudukan atau saiz elemen HTML. Ia membolehkan jurutera perisian menukar susunan, putaran, pusingan, saiz dan ciri optik komponen lain. Transformasi dicapai dengan bantuan operasi ubah bentuk 2D dan 3D seperti pemindahan, putaran, kecondongan dan amplitud. Sifat peralihan berfungsi dengan lancar dengan semua penyemak imbas web terkini dan boleh digunakan untuk menjana komponen visual dinamik dan animasi yang mencetuskan penglibatan dan interaksi pengguna. Komponen yang diubah suai mengekalkan saiz, kontur dan kedudukannya, dan komponen bersebelahan lain menyesuaikan diri dengan komponen yang diubah. Ini adalah cara yang bagus untuk bekerja dengan elemen pada halaman web tanpa menjejaskan reka letak elemen lain pada halaman tersebut.

tatabahasa

transform: [function] [value];

Fungsi boleh menjadi salah satu daripada berikut&miinus;

• translate() - Menggerakkan elemen di sepanjang paksi x dan y.

• rotate() - Memutar elemen di sekeliling asalnya.

• skala() - Menambah atau mengurangkan saiz elemen.

• skew() - Putar elemen di sepanjang paksi x atau y.

• matrix() - Menggabungkan berbilang transformasi menjadi satu transformasi.

Nilai bergantung pada ciri khusus yang anda gunakan. Sebagai ilustrasi, jika anda memilih untuk menggunakan fungsi translate(), nilai ini boleh dinyatakan sebagai translate(x, y), di mana nilai berangka x dan y mewakili bilangan piksel yang diperlukan untuk memindahkan elemen dalamnya. arah. Paksi mendatar dan paksi menegak.

:Sub-pemilih kesembilan

Pemilih CSS yang dipanggil :nth-child digunakan untuk memilih elemen berdasarkan kedudukan ordinalnya di kalangan elemen nenek moyang. Ia membolehkan anda menentukan komponen juvana tertentu yang terkandung dalam komponen menaik dan melampirkan atribut gaya pada komponen juvana tersebut. Pengecam :nth-child menggunakan algoritma untuk menentukan komponen anak yang harus dipilih. Sebagai contoh, anda boleh menggunakan :nth-child(2) untuk memilih elemen anak berikutnya bagi elemen induk, atau :nth-child(even) untuk memilih semua pengganti yang menduduki slot genap.

tatabahasa

:nth-child(an+b)

Di mana a dan b ialah integer, n ialah integer positif (bermula dari 1).

kaedah

Untuk mencipta kesan lipatan imej bagi imej, kita perlu membahagikan imej itu kepada bahagian yang berbeza terlebih dahulu. Kami akan menggunakan elemen

untuk menyimpan bahagian imej yang berlainan. Sekarang untuk memilih bahagian lain, pilih teg

dan kami akan menggunakan pemilih :nth-child yang dibincangkan di atas. Akhir sekali, kami akan mengubah setiap imej dalam beberapa cara untuk mencipta kesan origami.

Kod berikut pada asasnya ialah program HTML dan CSS yang boleh digunakan untuk mencipta kesan lipatan imej interaktif yang menarik secara visual. Ia berfungsi melalui pelbagai pengisytiharan dan arahan yang, apabila dilaksanakan, menyebabkan imej yang kelihatan runtuh dalam cara yang menarik dan dinamik secara visual. Kod HTML bermula dengan pengisytiharan doctype, diikuti dengan pembukaan dokumen HTML, pengepala yang mengandungi tajuk kesan, dan pengisytiharan teg gaya. Seterusnya ialah teg badan, yang mengandungi tajuk dan senarai unsur anak yang tidak tertib. Senarai itu kemudiannya digayakan menggunakan CSS untuk mencipta kesan yang melibatkan bekas empat elemen kanak-kanak, setiap satu dengan kesan runtuh.

Kod CSS memerlukan satu set arahan yang menggayakan senarai tidak tersusun, menyatakan butiran seperti jidar, pelapik dan kedudukan bekas. Selain itu, ia menggunakan kecerunan warna sebagai imej latar belakang untuk kesan lipatan. Kemudian nyatakan saiz bekas, lokasi dan sifat paparan. Gaya juga melibatkan spesifikasi peralihan dan bayang kotak, yang menyumbang kepada kesan keseluruhan animasi.

Selain itu, apabila pengguna melayang di atas bekas, ia menggunakan sifat transformasi skewY() untuk menggantikan elemen anak bekas itu, mencipta kesan dinamik yang menyerupai penampilan imej yang dilipat dua. Menggunakan atribut nth-child() membantu memilih elemen anak alternatif untuk menggunakan transformasi skewY(). Secara ringkasnya, gunakan atribut nth-child() untuk menentukan pose latar belakang setiap komponen kanak-kanak, dengan itu memastikan konfigurasi tepat bagi setiap serpihan imej semasa proses lipatan.

Contoh

Berikut ialah kod lengkap yang akan kita lihat dalam contoh ini -

<!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 产生这种印象。无论您是新手还是熟练的程序员，本文都为您提供了在网站上实现图像折叠效果所需的知识和材料。通过一点创造力和实验，您可以自定义效果以满足您的特定设计需求并增强访问者的用户体验。所以，今天就开始创建您自己的图像折叠效果吧！

Atas ialah kandungan terperinci Bagaimana untuk mencipta kesan lipatan imej menggunakan HTML dan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!