HTML, CSS dan jQuery: Bina kesan flip kad yang cantik-tutorial js-php.cn

HTML, CSS dan jQuery: Bina kesan flip kad yang cantik

WBOY

Lepaskan： 2023-10-27 13:43:45

asal

873 orang telah melayarinya

HTML, CSS dan jQuery: Bina kesan flip kad yang cantik

HTML, CSS dan jQuery: Bina kesan flipping kad yang cantik

Dalam reka bentuk web, aplikasi kesan khas boleh meningkatkan interaksi jantina halaman dan kesan visual. Kesan flipping kad ialah kesan khas biasa yang boleh membawa pengguna pengalaman menyemak imbas yang lebih jelas dan menarik. Artikel ini akan memperkenalkan cara menggunakan HTML, CSS dan jQuery untuk membina kesan flip kad yang cantik, dan memberikan contoh kod khusus.

Pertama sekali, kita perlu menyediakan struktur asas HTML. Kami akan menggunakan dua elemen div untuk mewakili bahagian hadapan dan belakang kad. Kodnya adalah seperti berikut:

<div class="card">
  <div class="front">
    <!-- 正面内容 -->
  </div>
  <div class="back">
    <!-- 反面内容 -->
  </div>
</div>

Salin selepas log masuk

Seterusnya, kami menggunakan CSS untuk menentukan gaya kad. Kita boleh menggunakan atribut transform untuk mencapai kesan flip, dan menggunakan atribut peralihan untuk mencapai animasi peralihan yang lancar. Kodnya adalah seperti berikut:

.card {
  position: relative;
  width: 200px;
  height: 200px;
  perspective: 1000px;
}

.front,
.back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  transition: transform 0.6s;
}

.front {
  background-color: #ffcc00;
}

.back {
  background-color: #ff3333;
  transform: rotateY(180deg);
}

Salin selepas log masuk

Dalam CSS, kami menetapkan kesan perspektif (perspektif) untuk elemen .card, yang boleh menjadikan kesan flip lebih realistik. Pada masa yang sama, kami menetapkan lebar dan ketinggian yang sama untuk elemen .depan dan .belakang, dan menggunakan atribut keterlihatan muka belakang untuk menyembunyikan paparan elemen belakang untuk mengelakkan masalah kelipan apabila terbalik. Kami juga menetapkan sudut putaran awal untuk elemen .back, menyebabkan ia terbalik ke belakang.

Akhir sekali, kami menggunakan jQuery untuk mencapai kesan membalikkan kad. Kami menggunakan peristiwa klik untuk mencetuskan kesan flip, dan menggunakan kaedah toggleClass untuk menukar nama kelas elemen depan dan belakang. Kodnya adalah seperti berikut:

$(document).ready(function() {
  $('.card').click(function() {
    $(this).toggleClass('flipped');
  });
});

Salin selepas log masuk

Dalam kod ini, kami menggunakan kaedah .ready() untuk memastikan dokumen dimuatkan sebelum melakukan operasi seterusnya. Apabila elemen .card diklik, kami menukar nama kelas terbalik melalui kaedah toggleClass(), dengan itu bertukar antara elemen depan dan belakang.

Untuk menjadikan kesan demonstrasi lebih jelas, kami boleh menambah beberapa kandungan teks dan gaya pada elemen depan dan belakang. Kod HTML dan CSS yang lengkap adalah seperti berikut:

<!DOCTYPE html>
<html>
<head>
  <style>
    .card {
      position: relative;
      width: 200px;
      height: 200px;
      perspective: 1000px;
    }
    
    .front,
    .back {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
      transition: transform 0.6s;
    }
    
    .front {
      background-color: #ffcc00;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24px;
      color: #ffffff;
    }
    
    .back {
      background-color: #ff3333;
      transform: rotateY(180deg);
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24px;
      color: #ffffff;
    }
    
    .flipped {
      transform: rotateY(180deg);
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script>
    $(document).ready(function() {
      $('.card').click(function() {
        $(this).toggleClass('flipped');
      });
    });
  </script>
</head>
<body>
  <div class="card">
    <div class="front">
      正面内容
    </div>
    <div class="back">
      反面内容
    </div>
  </div>
</body>
</html>

Salin selepas log masuk

Simpan kod di atas sebagai fail HTML, buka dengan penyemak imbas, dan anda akan melihat kesan flip kad yang cantik. Apabila anda mengklik pada kad, ia terbalik dengan lancar ke belakang, dan klik sekali lagi untuk menyelak kembali ke hadapan.

Melalui gabungan HTML, CSS dan jQuery, kami boleh mencipta pelbagai kesan khas dengan mudah untuk menambah tarikan dan interaktiviti pada halaman web. Saya harap kod sampel dalam artikel ini dapat membantu anda membina kesan flip kad yang cantik!

Atas ialah kandungan terperinci HTML, CSS dan jQuery: Bina kesan flip kad yang cantik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!