lokasi sekarang: Rumah > Muat turun > Kesan JS > Kesan khas CSS3 > pengembangan kad bermain css3 dan kesan khas animasi lipatan
pengembangan kad bermain css3 dan kesan khas animasi lipatan
Mengelaskan: Kesan JS / Kesan khas CSS3 | Masa keluaran: 2017-12-12 | lawatan: 2319 |
Muat turun: 53 |
Muat turun terkini
Akuarium Fantasi
Gadis Barisan Hadapan
Sayap Bintang
Syurga Peri Peri Bunga Kecil
Kisah Comel Restoran
Penjelajahan Pelancongan Shanhe
Cinta dan Pengeluar
Otak yang paling berkuasa 3
Debu Ganjil: Damila
Perjalanan Muda ke Barat 2
24 jamPapan pendahulu membaca
- 1 Bagaimanakah Saya Boleh Melaksanakan Pemangkasan Ellipsis dalam Elemen Teks Boleh Diubah Saiz?
- 2 diskmsg.dll - Apakah diskmsg.dll?
- 3 dialupmanager.dll - Apakah dialupmanager.dll?
- 4 diagrpt.dll - Apakah diagrpt.dll?
- 5 Mengapakah peralihan CSS dengan mudah masuk-keluar berfungsi dengan lancar semasa tuding tetapi tiba-tiba apabila tetikus keluar?
- 6 dicrhash.dll - Apakah dicrhash.dll?
- 7 Bagaimana untuk Menyuntik Ketergantungan ke dalam Objek Sendiri pada Musim Bunga?
- 8 Mengapa PHP Gema \"2\" Apabila Menambah dan Menggabungkan Integer?
- 9 Mengapakah aplikasi Java saya menggunakan GMT dan bukannya zon waktu OS saya, dan bagaimanakah saya boleh membetulkannya?
- 10 Cara Ping URL HTTP dengan Berkesan di Java: Panduan Komprehensif
- 11 Mengapa `std::fstream` Saya Gagal Mencipta Fail?
- 12 Bagaimana untuk Mengikat Kelas CSS dalam Paparan XML UI5 Menggunakan Atribut \"kelas\"?
- 13 Mengapa Pemulihan Panik dengan Pembolehubah Setempat Tidak Mengubah Nilai yang Dikembalikan dalam Go?
- 14 digiconf.dll - Apakah digiconf.dll?
- 15 Bagaimanakah saya boleh menjana gambar rajah UML daripada kelas PHP saya yang sedia ada?
Tutorial Terkini
-
- Koleksi lengkap kursus timbunan penuh pembangunan web asing
- 1651 2024-04-24
-
- Gunakan GraphQL praktikal bahasa
- 1924 2024-04-19
-
- Bermula dengan MySQL (Teacher mosh)
- 1752 2024-04-07
-
- Mock.js |. Axios.js |
- 2564 2024-03-29
css3 bermain kad pengembangan dan animasi lipatan kesan khas ialah pengembangan kad klik dan kesan animasi lipatan yang dihasilkan oleh css3 svg.
<!DOCTYPE html>
<html>
<kepala>
<meta charset="UTF-8">
<title>css3 pengembangan kad permainan dan animasi lipatan kesan khas</title>
<jenis pautan="teks/css" rel="stylesheet" href="css/style.css">
</head>
<body><script src="/demos/googlegg.js"></script>
<div class="perspective">
<div class='kad-bekas'>
<div class="message">Klik pada kad di sebelah kiri</div>
<div class='kad kad-kad1'>
<div class='kad__muka kad__muka--atas'>
<span class='card__value'>
A
</span>
<span class='card__suit'>
<svg width="21px" height="16px" viewBox="0 0 21 16" retakon="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http: //www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
35F5C"></path>
</span>
</div>
<div class='card__face card__face--btm'>
<span class='card__value'>
A
</span>
<span class='card__suit'>
<svg width="21px" height="16px" viewBox="0 0 21 16" retakon="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http: //www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<laluan d="M1.6440972,15.2434886 L19.7934028,15.2434886 L10.71875,1.39282802 L1.6440972,15.2434886 Z" id="Path<" 5 t;
</g>
</svg>
</span>
</div>
</div>
<div class='kad kad-kad2'>
<div class='kad__muka kad__muka--atas'>
<span class='card__value'>
K
</span>
<span class='card__suit'>
<svg width="20px" height="21px" viewBox="0 0 20 21" retakon="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http: //www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="Rectangle-3" stroke="#A68385" transform="translate(10.035534, 10.071068) rotate(-315.000000) translate(-10.035534, -10.035534, 10.071068) rotate(-315.000000) translate(-10.035534, -10.071068) " x="3.833" 4th="3.43" y="3.43" ="13.1923882" height="13.1923882"></rect>
</g>
</svg>
</span>
</div>
<div class='card__face card__face--btm'>
<span class='card__value'>
K
</span>
<span class='card__suit'>
<svg width="20px" height="21px" viewBox="0 0 20 21" retakon="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http: //www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="Rectangle-3" stroke="#A68385" transform="translate(10.035534, 10.071068) rotate(-315.000000) translate(-10.035534, -10.035534, 10.071068) rotate(-315.000000) translate(-10.035534, -10.071068) " x="3.833" 4th="3.43" y="3.43" ="13.1923882" height="13.1923882"></rect>
</g>
</svg>
</span>
</div>
</div>
<div class='kad kad-kad3'>
<div class='kad__muka kad__muka--atas'>
<span class='card__value'>
Q
</span>
<span class='card__suit'>
<svg width="21px" height="18px" viewBox="0 0 21 18" retakon="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http: //www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<circle id="Oval" stroke="#635F5C" cx="4.5" cy="13.5" r="4"></circle>
<circle id="Oval" stroke="#635F5C" cx="10.5" cy="4.5" r="4"></circle>
<circle id="Oval" stroke="#635F5C" cx="16.5" cy="13.5" r="4"></circle>
</g>
</svg>
</span>
</div>
<div class='card__face card__face--btm'>
<span class='card__value'>
Q
</span>
<span class='card__suit'>
<svg width="21px" height="18px" viewBox="0 0 21 18" retakon="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http: //www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<circle id="Oval" stroke="#635F5C" cx="4.5" cy="13.5" r="4"></circle>
<circle id="Oval" stroke="#635F5C" cx="10.5" cy="4.5" r="4"></circle>
<circle id="Oval" stroke="#635F5C" cx="16.5" cy="13.5" r="4"></circle>
</g>
</svg>
</span>
</div>
</div>
<div class='kad kad-kad4'>
<div class='kad__muka kad__muka--atas'>
<span class='card__value'>
J
</span>
<span class='card__suit'>
<svg width="20px" height="16px" viewBox="0 0 20 16" retakon="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http: //www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<laluan d="M0.925347203,14.7630198 L19.0746528,14.7630198 L10,0.912359268 L0.925347203,14.7630198 Z" id="50.02 transformasi" 0, 7.631510) putar( -180.000000) terjemah(-10.000000, -7.631510) "></path>
</g>
</svg>
</span>
</div>
<div class='card__face card__face--btm'>
<span class='card__value'>
J
</span>
<span class='card__suit'>
<svg width="20px" height="16px" viewBox="0 0 20 16" retakon="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http: //www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<laluan d="M0.925347203,14.7630198 L19.0746528,14.7630198 L10,0.912359268 L0.925347203,14.7630198 Z" id="50198 Z" id="50.02 transformasi" 0, 7.631510) putar( -180.000000) terjemah(-10.000000, -7.631510) "></path>
</g>
</svg>
</span>
</div>
</div>
</div>
</div>
<script type="text/javascript" src='js/jquery.min.js'></script>
<script type="text/javascript" src="js/index.js"></script>
</badan>
</html>