Buat skrin pemuatan lanjutan menggunakan CSS-tutorial css-php.cn

Buat skrin pemuatan lanjutan menggunakan CSS

WBOY

Lepaskan： 2023-09-17 23:13:02

ke hadapan

591 orang telah melayarinya

使用 CSS 创建高级加载屏幕

Semasa menyemak imbas halaman yang berbeza dalam tapak web, pembangun mesti menambah skrin pemuatan ke tapak web supaya tapak web mempunyai masa yang mencukupi untuk merentasi antara halaman web. Memuatkan skrin ialah cara yang berkesan untuk pengguna menunggu semasa halaman tapak web dimuatkan/dimulakan.

Bagaimana untuk membuat skrin pemuatan?

Untuk mencipta skrin pemuatan kita boleh menggunakan HTML dan CSS. Pertama, kami akan mencipta elemen div di mana kami akan memberikan tag tajuk yang akan memaparkan peratusan.

Kami kemudiannya akan menggunakan sifat CSS (seperti jejari sempadan) untuk menentukan ketinggian dan lebar serta menambah animasi pada elemen pemuatan. Kami juga akan menggunakan atribut over-flow untuk menyembunyikan elemen supaya kami hanya dapat melihat kandungan utama.

Tatabahasa

Berikut ialah sintaks atribut limpahan -

p {
   overflow: hidden/ visible/ scroll/ auto;
}

Salin selepas log masuk

Dalam sintaks di atas, anda boleh melihat bahawa nilai yang digunakan dengan atribut limpahan boleh menjadi nilai tersembunyi untuk menyembunyikan elemen, nilai boleh dilihat untuk menjadikan elemen kelihatan dan atribut tatal untuk menambah peluncur apabila elemen disembunyikan .

Mari lihat contoh untuk lebih memahami skrin pemuatan.

Contoh

Dalam kod yang diberikan di bawah, kami telah mengisytiharkan teg tajuk dan mengisytiharkan bekas div, mencipta bekas pemuatan kami di dalamnya dan kemudian mengisinya dengan warna dan menambahkan animasi. Selepas itu, kami menambah tajuk kedua dalam bekas untuk menunjukkan peratusan dan menambah fungsi bingkai utama untuk berputar 360 darjah. Mari kita lihat output kod tersebut.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Advanced Loading Screen</title>
   <style>
      body {
         background-color: #111;
      }
      h2 {
         color: white;
         text-align: center;
         margin: 20px 0;
         font-size: 70px;
      }
      .screen {
         height: 250px;
         margin: auto;
         border-radius: 50%;
         position: relative;
         width: 250px;
         top: 20%;
         border: 4px solid #DDD;
         overflow: hidden;
      }
      @keyframes rotate {
         to {
            transform: rotate(358deg);
         }
      }
      .screen::after {
         content: "";
         position: absolute;
         top: 25%;
         left: -50%;
         height: 300%;
         width: 200%;
         nimation: rotate 10s linear forwards infinite;
         background-color: blue;
         border-radius: 50%;
         box-shadow: 0 3 10px #4CAF50;
         opacity: 0.9;
      }
      h3 {
         color: white;
         font-size: 70px;
         text-align: center;
         position: relative;
         top: 14%;
      }
   </style>
</head>
<body>
   <h2>Loading Screen</h2>
   <div class="screen">
      <h3>50%</h3>
   </div>
</body>
</html>

Salin selepas log masuk

Anda boleh lihat dalam output di atas bahawa kami mengisytiharkan teg tajuk dahulu, kemudian bekas tempat kami menambah warna yang memaparkan tajuk kedua kami, dan kemudian animasi dalam bekas. Animasi berputar 360 darjah di atas tajuk peratusan.

Contoh

Berikut ialah satu lagi contoh untuk mencipta skrin pemuatan lanjutan. Dalam contoh di bawah, kami mengisytiharkan elemen div dan kemudian memberikannya kelas untuk menggayakan elemen menggunakan sifat CSS. Kami menambahkan warna hitam dan merah pada jidar, menambahkan animasi padanya dan menggunakan fungsi bingkai utama untuk memutarkan bekas 360 darjah. Kod di atas menunjukkan cara menambah skrin pemuatan pada halaman web kami.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Example of the advanced loading screen</title>
   <style>
      @keyframes spin {
         100% {
             transform: rotate(359deg);
         }
         0% {
            transform: rotate(0deg);
         }
      }
      .load {
        border-bottom: 14px solid black;
        border-right: 14px solid red;
        border-left: 14px solid red;
        border-top: 14px solid black;
        border-radius: 49%;
        width: 120px;
        animation: spin 3s linear infinite;
        height: 120px;
      }
      @keyframes spin {
         0% {
            transform: rotate(0deg);
         }
         100% {
            transform: rotate(360deg);
         }
      }
   </style>
</head>
<body>
   <div class="load"></div>
</body>
</html>

Salin selepas log masuk

Dalam output, anda boleh melihat dua warna diputar 360 darjah, memberikan pengguna gambaran bahawa halaman sedang dimuatkan. Anda boleh menggunakan atribut align untuk menjajarkan pemuat ke tengah halaman.

NOTA - Atribut kerangka utama ialah sifat CSS yang membolehkan pembangun menganimasikan elemen HTML tanpa menggunakan JavaScript, dan bingkai utama ini menentukan gaya yang akan ada pada elemen tersebut.

Sifat kerangka kunci menentukan jumlah masa animasi mesti dijalankan dan peralihan yang digunakan hendaklah lancar dan tepat. Peratusan harus dinyatakan, dan pembangun mesti memastikan bahawa animasi itu serasi dengan semua penyemak imbas.

Kesimpulan

Pembangun web menggunakan pelbagai jenis gaya dan animasi untuk mencipta skrin pemuatan bergantung pada projek yang sedang mereka kerjakan. Menjadikan skrin pemuatan sedikit berbeza dan usaha kreatif ke dalamnya adalah penting kerana pengguna sering terganggu dengan rupa skrin pemuatan dan masa yang diperlukan untuk memuatkan halaman. Tujuan utama skrin pemuatan ini adalah untuk menjadikan laman web interaktif dan tidak membosankan pengguna apabila halaman itu mengambil banyak masa untuk dimuatkan/dilancarkan.

Atas ialah kandungan terperinci Buat skrin pemuatan lanjutan menggunakan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!