HTML, CSS dan jQuery: Cipta kad selak 3D yang hebat-tutorial js-php.cn

HTML, CSS dan jQuery: Cipta kad selak 3D yang hebat

PHPz

Lepaskan： 2023-10-24 12:57:40

asal

1517 orang telah melayarinya

HTML, CSS dan jQuery: Cipta kad selak 3D yang hebat

Dalam reka bentuk dan pembangunan web, kesan hebat boleh meningkatkan pengalaman pengguna dan menjadikan tapak web lebih menarik. Kesan sejuk yang biasa ialah kad selak 3D. Artikel ini akan memperkenalkan cara menggunakan HTML, CSS dan jQuery untuk mencipta kesan kad selak 3D yang hebat, dan memberikan contoh kod khusus.

Pertama, kita memerlukan struktur HTML untuk menyimpan kandungan kad selak. Mari buat halaman HTML ringkas dan tambahkan pautan CSS dan JavaScript yang diperlukan. Kodnya adalah seperti berikut:

<!DOCTYPE html>
<html>
<head>
    <title>3D翻转卡片</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="script.js"></script>
</head>
<body>
    <div class="card">
        <div class="card-inner">
            <div class="card-front">
                <h2>正面</h2>
            </div>
            <div class="card-back">
                <h2>背面</h2>
            </div>
        </div>
    </div>
</body>
</html>

Salin selepas log masuk

Kod di atas mencipta kad ringkas yang mengandungi elemen div untuk dua panel, depan dan belakang. Kelas kad akan digunakan untuk menggayakan bekas kad, kelas kad-dalam akan digunakan untuk melaksanakan kesan flip, dan kelas kad-depan dan belakang akan digunakan untuk membezakan bahagian hadapan dan belakang.

Sekarang, mari tambah gaya CSS pada kad. Cipta fail bernama style.css dan tambahkan kod berikut padanya:

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

.card-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.card:hover .card-inner {
    transform: rotateY(180deg);
}

.card-front, .card-back {
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
}

.card-front {
    transform: rotateY(0deg);
    background-color: #3498db;
}

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

Salin selepas log masuk

Kod di atas menggayakan penampilan dan kesan flip kad. Dengan menetapkan sifat perspektif, kami boleh menambahkan sedikit kedalaman pada kad. Gunakan atribut transform dan atribut peralihan untuk mencapai kesan flip. Pemilih card:hover .card-inner akan mencetuskan membalikkan kad pada tetikus.

Akhir sekali, kita perlu menggunakan jQuery untuk memulakan kad flip. Cipta fail bernama script.js dan tambahkan kod berikut padanya:

$(document).ready(function() {
    $('.card').click(function() {
        $(this).find('.card-inner').toggleClass('flip');
    });
});

Salin selepas log masuk

Kod di atas menggunakan kaedah toggleClass jQuery untuk menambah atau mengalih keluar kelas flip, dengan itu mencetuskan kesan flip kad. Apabila pengguna mengklik pada kad, ia bertukar antara depan dan belakang.

Kini kami telah melengkapkan kod yang diperlukan untuk mencipta kad selak 3D yang hebat. Simpan semua fail dalam folder yang sama dan buka fail HTML dalam penyemak imbas anda dan anda akan melihat kad ringkas. Apabila anda menuding atau mengklik pada kad, ia akan menyelaknya dalam 3D untuk menunjukkan bahagian hadapan dan belakang.

Saya harap artikel ini akan membantu anda mempelajari HTML, CSS dan jQuery untuk mencipta kad selak 3D yang menarik! Jangan ragu untuk bereksperimen dengan menyesuaikan gaya dan menambah lebih banyak kandungan pada kad untuk mencipta kesan unik anda sendiri.

Atas ialah kandungan terperinci HTML, CSS dan jQuery: Cipta kad selak 3D yang hebat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!