Animasi pemuatan halaman web CSS: cipta pelbagai kesan animasi pemuatan yang hebat

Apabila pengguna memasuki halaman web, perkara yang paling tidak sabar ialah menunggu halaman dimuatkan. Untuk mengurangkan kebimbangan pengguna, banyak laman web telah mula menggunakan animasi pemuatan CSS untuk menjadikan pemuatan halaman lebih menarik. Dalam artikel ini, kami akan mempelajari cara menggunakan CSS untuk mencipta pelbagai kesan animasi pemuatan yang hebat dan memberikan contoh kod khusus untuk membantu anda melaksanakannya.

1. Animasi asas

Mula-mula, mari buat beberapa animasi pemuatan asas. Kita boleh menggunakan sifat animasi dalam CSS untuk mencipta animasi asas. Sifat animasi mempunyai beberapa sub-sifat, seperti berikut:

• nama-animasi: Pilih nama peraturan bingkai utama untuk digunakan.
• tempoh-animasi: Tentukan tempoh kitaran (dalam saat atau milisaat).
• fungsi pemasaan-animasi: Tentukan lengkung kelajuan kitaran.
• animation-delay: Tentukan masa kelewatan kitaran.
• animation-iteration-count: Mentakrifkan bilangan kali animasi harus dimainkan.

Sekarang, mari lihat beberapa jenis animasi pemuatan asas yang berbeza.

1. Animasi putaran

Dalam animasi pemuatan ini, kami menggunakan kod berikut untuk mentakrifkan rangka kunci putaran:

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  
  to {
    transform: rotate(360deg);
  }
}

Kod di atas menggunakan peraturan @keyframes untuk mentakrifkan bingkai utama bernama "putar". Dalam kerangka utama ini, kami menggunakan atribut transformasi untuk menentukan putaran. Dalam dari dan ke, kami mentakrifkan tahap putaran, dari 0 hingga 360 darjah.

Seterusnya, kami perlu menentukan animasi ini untuk elemen "pemuat" kami:

.loader {
  animation-name: rotate;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

2. Animasi Blink

Dalam animasi pemuatan ini, kami menggunakan kod berikut untuk mentakrifkan rangka kunci berkelip gelung:

@keyframes blink {
  50% {
    opacity: 0.5;
  }
}

Di atas Kod menggunakan peraturan @keyframes untuk mentakrifkan kerangka utama bernama "blink". Dalam rangka utama ini, kami menggunakan sifat kelegapan untuk menentukan ketelusan elemen. Pada 50%, kami menetapkannya kepada 0.5, yang akan menjadikannya kitaran antara dua keadaan.

Untuk menggunakan animasi ini pada elemen "pemuat" kami, gunakan kod berikut:

.loader {
  animation-name: blink;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

II ANIMASI LANJUTAN

Sekarang kita telah belajar cara mencipta animasi pemuatan asas dalam CSS, mari kita terokai cara Cipta lebih lanjut. animasi. Berikut ialah beberapa animasi pemuatan yang menarik dan contoh kodnya.

1. Animasi gelombang

Dalam animasi pemuatan ini, kami menggunakan kod berikut untuk menentukan kerangka utama mod gelombang:

@keyframes wave {
  0% {
    transform: translateX(0) translateY(0);
  }
  
  50% {
    transform: translateX(30px) translateY(15px);
  }
  
  100% {
    transform: translateX(0) translateY(0);
  }
}

Dalam kod di atas, kami menggunakan atribut transformasi untuk mencipta kesan gelombang. Pada kedudukan 0% dan 100%, kami menetapkan elemen kepada kedudukan asalnya. Pada kedudukan 50%, kami menggunakan translateX (terjemahan mendatar) dan translateY (terjemahan menegak) untuk mencipta bentuk gelombang.

Seterusnya, kami menentukan animasi ini untuk elemen "pemuat" kami:

.loader {
  animation-name: wave;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

2. Animasi resapan

Dalam animasi pemuatan ini, kami menggunakan kod berikut untuk mentakrifkan kerangka utama penyebaran:

@keyframes spread {
  0% {
    transform: scale(0);
    opacity: 0.5;
  }
  
  50% {
    transform: scale(1);
    opacity: 0.1;
  }
  
  100% {
    transform: scale(0);
    opacity: 0.5;
  }
}

Dalam kod di atas, kami menggunakan atribut transformasi untuk mencipta kesan resapan. Pada 0% dan 100% kami menetapkan elemen kepada nilai awal pengecilan dan ketelusannya. Pada kedudukan 50%, kami menggunakan sifat skala untuk mencipta animasi resapan.

Seterusnya, kami menentukan animasi ini untuk elemen "pemuat" kami:

.loader {
  animation-name: spread;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

Ringkasan

Dengan menggunakan CSS, kami boleh mencipta pelbagai jenis animasi pemuatan untuk tapak web kami. Animasi pemuatan ini boleh menjadikan pemuatan halaman lebih menarik dan melegakan kebimbangan menunggu pengguna. Dalam artikel ini, kami mempelajari cara membuat beberapa animasi pemuatan asas, serta cara membuat animasi yang lebih maju. Saya harap contoh kod ini membantu dalam kerja anda.

Atas ialah kandungan terperinci Animasi pemuatan halaman web CSS: cipta pelbagai kesan animasi pemuatan yang hebat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!