Rumah > Artikel > hujung hadapan web > Cara membuat susun atur flip kad responsif menggunakan HTML dan CSS
Cara membuat susun atur flip kad responsif menggunakan HTML dan CSS
- 王林asal
- 2023-10-24 09:27:27984semak imbas
Cara membuat susun atur flip kad responsif menggunakan HTML dan CSS
Petikan:
Dalam pembangunan web hari ini, reka bentuk gaya responsif telah menjadi keperluan yang sangat penting. Untuk memberikan pengalaman pengguna yang terbaik pada peranti yang berbeza, kami perlu membuat reka letak untuk tapak web kami yang boleh menyesuaikan diri dengan saiz skrin yang berbeza. Dalam artikel ini, saya akan menunjukkan kepada anda cara membuat susun atur flip kad responsif menggunakan HTML dan CSS.
Langkah 1: Struktur HTML
Pertama, mari kita konfigurasikan struktur asas fail HTML. Kami akan menggunakan fail gaya CSS luaran, jadi kami perlu memautkan fail gaya CSS dalam fail HTML. Kodnya adalah seperti berikut:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="card">
<div class="front">
<h2>卡片正面</h2>
</div>
<div class="back">
<h2>卡片背面</h2>
</div>
</div>
</body>
</html>Langkah 2: Gaya CSS
Sekarang, kami akan mencipta fail CSS yang dipanggil "style.css" dan menambah gaya asas pada reka letak kad. Kod adalah seperti berikut:
.card {
width: 300px;
height: 200px;
perspective: 1000px;
position: relative;
margin: 0 auto;
}
.front, .back {
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden;
transition: transform 0.5s;
}
.front {
background-color: #f9f9f9;
transform: rotateY(0deg);
}
.back {
background-color: #c3c3c3;
transform: rotateY(180deg);
}
.card:hover .front {
transform: rotateY(-180deg);
}
.card:hover .back {
transform: rotateY(0deg);
}
h2 {
text-align: center;
line-height: 200px;
color: #fff;
}Parse kod gaya CSS:
- atribut
perspektif digunakan untuk mencipta perspektif dan digunakan untuk mencapai kesan 3D. perspective属性用于创建视角，用于实现 3D 效果。 -
backface-visibility属性用于指定卡片的背面是否可见。 -
transition属性用于实现平滑的过渡效果。 rotateYSifat
Atribut
@media screen and (max-width: 600px) {
.card {
width: 100%;
}
}#🎜🎜# Ringkasan: #🎜🎜# Artikel ini menunjukkan kepada anda cara membuat reka letak flip kad responsif menggunakan HTML dan CSS. Dengan menambahkan gaya CSS dan pertanyaan media yang sesuai, kami boleh menjadikan reka letak kad kelihatan terbaik pada peranti yang berbeza. Anda boleh menyesuaikan gaya dan saiz kad mengikut keperluan anda. Semoga artikel ini dapat membantu anda lebih memahami dan menggunakan teknik dan konsep HTML dan CSS. #🎜🎜#Atas ialah kandungan terperinci Cara membuat susun atur flip kad responsif menggunakan HTML dan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!