Rumah > Artikel > hujung hadapan web > Tutorial Animasi CSS: Ajar anda langkah demi langkah untuk mencapai kesan latar belakang yang dinamik
Tutorial Animasi CSS: Ajar anda langkah demi langkah untuk mencapai kesan latar belakang yang dinamik
- PHPzasal
- 2023-10-20 19:01:501025semak imbas
Tutorial Animasi CSS: Ajar anda langkah demi langkah cara melaksanakan kesan latar belakang melompat
Dalam reka bentuk web, kesan animasi boleh menambah kemeriahan halaman dan menarik perhatian pengguna. Animasi CSS ialah satu cara untuk mencapai kesan ini. Tutorial ini akan mengajar anda langkah demi langkah cara menggunakan CSS untuk mencapai kesan latar belakang yang bergerak, menggunakan contoh kod khusus untuk memudahkan anda memahami dan menggunakan.
Langkah 1: Buat struktur HTML
Pertama, kita perlu mencipta struktur HTML yang mengandungi kandungan. Tambahkan elemen div dalam teg badan dan berikannya id unik, contohnya:
<body> <div id="background"></div> <!-- 页面其它内容 --> </body>
Langkah 2: Tetapkan gaya asas
Seterusnya, kita perlu menetapkan gaya asas untuk elemen div ini. Dalam CSS, kita boleh menggunakan "kedudukan: tetap" untuk membetulkannya dalam halaman dan menjadikannya latar belakang. Dan tetapkan lebar dan ketinggiannya, serta warna latar belakang atau imej latar belakang. Kod sampel adalah seperti berikut:
#background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #f5f5f5;
}Langkah 3: Tambah kesan animasi
Seterusnya, kami akan menambah kesan animasi pada elemen latar belakang ini. Di sini kami menggunakan animasi kerangka kunci CSS (Keyframe Animation) untuk mencapai kesan melompat. Pertama, kita perlu mencipta animasi dalam CSS dan menentukan namanya, tempoh dan kaedah pergerakannya. Kod sampel adalah seperti berikut:
@keyframes jump {
0% {
transform: translateX(0) translateY(0);
}
25% {
transform: translateX(10px) translateY(-10px);
}
50% {
transform: translateX(20px) translateY(0);
}
75% {
transform: translateX(10px) translateY(10px);
}
100% {
transform: translateX(0) translateY(0);
}
}
#background {
/* 其它样式 */
animation-name: jump;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}Dalam kod di atas, kami mentakrifkan animasi bernama "lompat", yang mencapai kesan terjemahan dengan menukar atribut transformasi elemen dalam proses daripada 0% kepada 100%. Dengan melaraskan nilai translateX dan translateY, kami boleh mengawal terjemahan mendatar dan menegak elemen. Peringkat peratusan yang berbeza sepadan dengan kedudukan terjemahan yang berbeza, dengan itu membentuk kesan lompatan.
Akhir sekali, kami menggunakan animasi ini pada elemen latar belakang, menetapkan nama animasi kepada "melompat", dan mengawal tempoh dan mod pergerakan animasi dengan menetapkan tempoh animasi, fungsi pemasaan animasi dan kiraan lelaran animasi dan bilangan ulangan.
Langkah 4: Uji kesan
Selepas melengkapkan kod di atas, muat semula halaman, dan anda akan melihat kesan elemen latar belakang melompat. Anda boleh melaraskan parameter animasi dan gaya elemen latar belakang mengikut keperluan anda untuk mencapai kesan yang anda inginkan.
Ringkasan:
Melalui tutorial ini, kami belajar cara menggunakan CSS untuk mencapai kesan latar belakang yang bergerak. Dengan mencipta struktur HTML asas, menetapkan gaya elemen latar belakang, dan menggunakan animasi kerangka kunci CSS untuk mencapai kesan panning, kami boleh mencipta pelbagai kesan animasi latar belakang yang menarik dengan mudah.
Sudah tentu, terdapat lebih banyak senario aplikasi dan sifat untuk diterokai oleh animasi CSS. Saya harap tutorial ini dapat membantu anda memahami dan menggunakan animasi CSS untuk menambah lebih jelas dan kreativiti pada reka bentuk web anda. Saya doakan anda lebih berjaya dalam reka bentuk web!
Atas ialah kandungan terperinci Tutorial Animasi CSS: Ajar anda langkah demi langkah untuk mencapai kesan latar belakang yang dinamik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!