Cara menggunakan jQuery untuk mencapai kesan flip teks

Dengan populariti halaman web dan aplikasi moden, ramai orang telah mula mencuba menggunakan pelbagai kesan hebat untuk menambah lebih banyak interaksi dan kesan visual pada halaman web. Satu kesan sedemikian ialah fon terbalik. Dengan menggunakan perpustakaan jQuery kita boleh mencapai kesan ini dengan mudah.

Dalam artikel ini, saya akan menunjukkan kepada anda cara menggunakan jQuery untuk mencapai kesan flip teks dan cara menggunakannya pada tapak web anda.

Langkah 1. Cipta struktur HTML

Pertama, kita perlu mencipta struktur HTML asas. Kami mencipta bekas DIV dan menambah dua teg SPAN padanya, satu dengan kandungan teks "depan" dan satu lagi dengan kandungan teks "terbalik". Berikut ialah kod yang diperlukan:

flip jQuery



< /head> ;

  <div class="flipper">
     <span class="front">正面</span>
     <span class="back">反面</span>
  </div>

< /html>

Langkah 2. Cipta gaya CSS

Kami juga memerlukan beberapa gaya CSS untuk mentakrifkan gaya bekas DIV dan teg SPAN. Berikut ialah kod CSS yang diperlukan:

.bekas flip {

perspective: 1000px;
position: relative;
width: 200px;
height: 150px;
margin: 0 auto;

}

.flipper {

position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 0.5s ease-in-out;

}

.depan, .belakang {

position: absolute;
width: 100%;
height:100%;

}

.depan {

font-size:48px;
text-align: center;
background-color: #fff;

}

.belakang {

font-size: 48px;
text-align: center;
background-color: #000;
color: #fff;
transform: rotateY(180deg);

}

Dalam CSS, kami mentakrifkan dua kelas: bekas flip dan flipper. Gaya bekas flip mentakrifkan lebar dan ketinggian bekas, serta atribut perspektif yang diperlukan untuk menambah kesan putaran 3D. Gaya sirip mentakrifkan kedudukan bekas, lebar, ketinggian dan sifat gaya ubah yang diperlukan untuk kesan putaran 3D.

Selain itu, kami juga mentakrifkan dua kelas SPAN: depan dan belakang. Gaya kelas hadapan mentakrifkan susunan teks di hadapan dan warna latar belakang Gaya kelas belakang mentakrifkan susunan, warna latar belakang, warna fon dan kesan putaran teks di belakang.

Langkah 3. Tulis kod jQuery

Sekarang, kami akan menggunakan perpustakaan jQuery untuk menulis kod untuk mencapai kesan flip teks. Kami akan menggunakan kaedah .hover() jQuery, yang menyala apabila tetikus melayang di atas elemen. Dalam contoh ini, kami akan menambah kelas yang dipanggil flip pada elemen flipper apabila tetikus dilegarkan di atasnya.

Berikut ialah kod jQuery:

$(".flipper").hover(function(){
$(this).addClass("flip");
} );

Kod di atas bermaksud apabila tetikus melayang di atas elemen flipper, iaitu, apabila fungsi hover dilaksanakan, kelas flip akan ditambahkan pada elemen flipper. Ini akan memutarkan bekas DIV 180 darjah dan memaparkan kandungan teks pada bahagian yang bertentangan.

Langkah 4. Uji kod anda

Kini kami boleh menjalankan halaman web dan menguji kesannya. Apabila kita menuding tetikus di atas bekas DIV, bekas akan terbalik ke belakang, menunjukkan kandungan teks di bahagian belakang.

Ini ialah kesan flip fon yang dicapai melalui perpustakaan jQuery. Anda boleh mengubah suai kod HTML, CSS dan jQuery mengikut keperluan untuk mencapai hasil yang lebih baik.

Ringkasan

Artikel ini menunjukkan kepada anda cara menggunakan jQuery untuk mencapai kesan flip fon. Dengan mencipta struktur HTML, gaya CSS dan kod jQuery, kami boleh menambahkan kesan hebat ini pada halaman web kami dengan mudah. Harap artikel ini membantu anda!

Atas ialah kandungan terperinci Cara menggunakan jQuery untuk mencapai kesan flip teks. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!