Rumah > Artikel > hujung hadapan web > Tutorial Animasi CSS: Ajar anda langkah demi langkah untuk mencapai kesan perubahan halaman
Tutorial Animasi CSS: Ajar anda langkah demi langkah untuk mencapai kesan perubahan halaman
- WBOYasal
- 2023-10-24 09:30:261231semak imbas
Tutorial Animasi CSS: Mengajar anda langkah demi langkah cara melaksanakan kesan perubahan halaman, contoh kod khusus diperlukan
Animasi CSS ialah bahagian penting dalam reka bentuk tapak web moden. Ia boleh menambah kecerahan pada halaman web, menarik perhatian pengguna dan meningkatkan pengalaman pengguna. Salah satu kesan animasi CSS yang biasa ialah kesan perubahan halaman. Dalam tutorial ini, saya akan membawa anda langkah demi langkah untuk mencapai kesan yang menarik perhatian ini dan memberikan contoh kod khusus.
Pertama, kita perlu mencipta struktur HTML asas. Kodnya adalah seperti berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS翻页特效</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="page page1">
<h1>第一页</h1>
</div>
<div class="page page2">
<h1>第二页</h1>
</div>
<div class="page page3">
<h1>第三页</h1>
</div>
</div>
</body>
</html>Dalam kod di atas, kami telah mencipta bekas dengan tiga halaman. Setiap halaman mempunyai tajuk yang memaparkan kandungan yang berbeza.
Seterusnya, kita perlu menulis gaya CSS. Buka fail CSS baharu dan tambahkan kod berikut:
.container {
width: 100%;
height: 100%;
perspective: 1000px;
position: relative;
overflow: hidden;
}
.page {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transform-style: preserve-3d;
transition: 1s;
}
.page1 {
background-color: #f8b195;
transform: rotateY(0deg);
}
.page2 {
background-color: #f67280;
transform: rotateY(-180deg);
}
.page3 {
background-color: #c06c84;
transform: rotateY(-180deg);
}Dalam kod di atas, kami menetapkan lebar dan tinggi bekas kepada 100% untuk menyesuaikan dengan mudah kepada saiz skrin yang berbeza. Kemudian kami menggunakan sifat perspektif CSS untuk mencipta kesan perspektif 3D, menjadikan kesan flip halaman lebih realistik. Tetapkan kedudukan kepada relatif dan limpahan kepada tersembunyi untuk memastikan kandungan halaman tidak melimpahi bekas.
Seterusnya, kami menetapkan lebar, ketinggian dan kedudukan setiap halaman, dan menggunakan atribut gaya transformasi untuk mengekalkan kesan transformasi 3D, dan kemudian menggunakan atribut peralihan untuk mencapai kesan peralihan yang lancar.
Bagi warna latar belakang halaman, kami menetapkan warna yang berbeza untuk setiap halaman untuk memudahkannya dibezakan.
Sekarang kita telah melengkapkan struktur HTML asas dan gaya CSS, mari kita laksanakan kesan perubahan halaman.
Buka fail CSS anda dan tambahkan kod berikut:
.container:hover .page1 {
transform: rotateY(180deg);
}
.container:hover .page2 {
transform: rotateY(0deg);
}
.container:hover .page3 {
transform: rotateY(180deg);
}Dalam kod di atas, kami mencetuskan kesan flip dengan menggunakan :hover pseudo-class. Apabila pengguna menuding tetikus di atas bekas, halaman 1 akan terbalik 180 darjah, halaman 2 kekal sama dan halaman 3 terbalik 180 darjah.
Simpan kod anda dan muat semula penyemak imbas Anda kini akan melihat tiga bahagian halaman terbalik.
Melalui tutorial di atas, kami berjaya melaksanakan kesan perubahan halaman CSS yang menarik perhatian dan memberikan contoh kod khusus secara langkah demi langkah. Anda boleh melaraskan dan mengembangkannya untuk memenuhi keperluan anda, menambah lebih banyak halaman atau kesan yang lebih kompleks.
Animasi CSS adalah bahagian yang sangat penting dan menarik dalam reka bentuk web, ia boleh menambah daya hidup dan kreativiti pada tapak web anda. Saya harap tutorial ini dapat membantu anda dan memberi inspirasi kepada lebih kreativiti dan inspirasi.
Atas ialah kandungan terperinci Tutorial Animasi CSS: Ajar anda langkah demi langkah untuk mencapai kesan perubahan halaman. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!