ບວກການສ້າງ: CSS ການຕັ້ງມູນນິວທະຍົມ

ບົດຮຽນການສ້າງການຕັ້ງມູນນິວທະຍົມທີ່ນໍາໃຊ້ CSS.

亲自试一试

ບວກການສ້າງການຕັ້ງມູນນິວທະຍົມ.

ບານທີ 1 - ການເພີ່ມ HTML:

<div class="loader"></div>

ບານທີ 2 - ການເພີ່ມ CSS:

.loader {
  border: 16px solid #f3f3f3; /* ສີຂາວ */
  border-top: 16px solid #3498db; /* ສີຟ້າ */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

亲自试一试

ກໍານົດການອະທິບາຍ:

border ການບັນທຶກລັກສະນະຈະບັນທຶກຂະໜາດແລະສີບານການຕັ້ງມູນນິວທະຍົມ.border-radius ການບັນທຶກລັກສະນະຈະປ່ຽນການຕັ້ງມູນນິວທະຍົມເປັນວົງວຽນ.

ສ່ວນສີຟ້າຫຼັງກັບການໝູນວຽນຂອງການຕັ້ງມູນນິວທະຍົມ, ທີ່ພົບພາຍໃນບານການຕັ້ງມູນນິວທະຍົມ. border-top ການບັນທຶກລັກສະນະ. ຖ້າທ່ານຕ້ອງການ“ການໝູນວຽນ”ຫຼາຍຂຶ້ນ, ທ່ານສາມາດບັນນາທິການຕິດຕາມ. border-bottom、border-left ແລະ/ຫຼື border-right（ເບິ່ງຫຼັງການພິມລະບຸດັ່ງກ່າວ）.

ຂະໜາດຂອງການຕັ້ງມູນນິວທະຍົມຂອງການຕັ້ງມູນນິວທະຍົມ. width ແລະ height ການບັນທຶກລັກສະນະ.

ສຸດທ້າຍ, ພວກເຮົາເພີ່ມການດຳເນີນການອອກອາກາດ, ສະແດງສ່ວນສີຟ້າຫຼັງກັບຄວາມໄວສະແດງ 2 ວິນາທີ.

ຄໍາເຕືອນ:ສຳລັບທີ່ບໍ່ໄດ້ສະໜັບສະໜູນ animation ແລະ transform ສະບັບບັນນາທິການທີ່ມີບັນດາລັກສະນະ, ທ່ານຄວນບັນນາທິການຕິດຕາມ. -webkit- ຄຳເວົ້າຫນັງ. ກະລຸນາກວດຄືນການດຳເນີນງານ.

ການເພີ່ມຕົວແທນການໝູນວຽນ

实例

.loader {
  border-top: 16px solid blue;
  border-bottom: 16px solid blue;
}

亲自试一试

实例

.loader {
  border-top: 16px solid blue;
  border-right: 16px solid green;
  border-bottom: 16px solid red;
}

亲自试一试

实例

.loader {
  border-top: 16px solid blue;
  border-right: 16px solid green;
  border-bottom: 16px solid red;
  border-left: 16px solid pink;
}

亲自试一试

另一个例子

如何将加载器放置在页面中间，并在加载完成时显示“页面内容”：

实例

亲自试一试