Trung tâm cá nhân
cuốn sách gpt4 ai đã làm

css - Trình tải trước CSS của khách hàng

In lại Tác giả: Vũ trụ không gian Thời gian cập nhật: 2023-11-04 02:32:52 27 4
mua khóa gpt4 Nike

Vì vậy, tôi đã làm cho trình tải trước CSS này hoạt động. Tuy nhiên, tôi gặp một số khó khăn khi thêm nó vào trang web của mình. Ai đó có thể giúp tôi hiểu cách triển khai mã để cho phép trình tải trước trở thành thành phần đầu tiên được xem trước khi tải trang web. Lúc này trình tải trước sẽ mờ dần. Mã cho trình tải trước như sau:

/* CSS */

#.container {
  width: 100%;
}
#css-trình tải trước{
  vị trí: tương đối;
  width: 100%;
  ký quỹ: 10% 0 0 45%;
}
#css-khoảng thời gian tải trước{
  display: block;
  bottom: 0px;
  chiều rộng: 5px;
  chiều cao: 10px;
  nền: #e43632;
  position: absolute;
  hoạt hình: preloader_1 2,25 giây dễ dàng ra vào vô hạn;
}

#css-preloader span:nth-child(2){
  trái: 11px;
  độ trễ hoạt ảnh: .2s;
}
#css-preloader span:nth-child(3){
  trái:22px;
  độ trễ hoạt hình: .4s;
}
#css-preloader span:nth-child(4){
  trái:33px;
  độ trễ hoạt hình: .6s;
}
#css-preloader span:nth-child(5){
  trái:44px;
  độ trễ hoạt hình: .8s;
}
#css-preloader span:nth-child(6){
  trái: 55px;
  độ trễ hoạt hình: 1 giây;
}
#css-preloader span:nth-child(7){
  trái: 66px;
  độ trễ hoạt ảnh: 1,2 giây;
}
#css-preloader span:nth-child(8){
  trái: 77px;
  độ trễ hoạt hình: 1,4 giây;
}
### #css-preloader span:nth-child(9){
  trái: 88px;
  độ trễ hoạt hình: 1,6 giây;
}
@keyframes trình tải trước_1 {
###0% {
  chiều cao: 10px;
  biến đổi: dịchY(0px);
  nền: #fdcf01;
 }

25% {
  chiều cao: 60px;
  biến đổi: dịchY(15px);
  nền: #4bb846;
}
50% {
  chiều cao: 10px;
  biến đổi: dịchY(-10px);
  nền:#2988dd;
}  
100% {
  chiều cao: 10px;
  biến đổi: dịchY(0px);
  nền: #e43632;
  }
}

câu trả lời hay nhất

  1. Vui lòng không sử dụng ID cho mục đích tạo kiểu https://github.com/CSSLint/csslint/wiki/Disallow-IDs-in-selector

  2. Đừng đặt tên cho lớp CSS của bạn .css-trình tải trước Hãy càng chung chung càng tốt. Những thứ được định nghĩa trong CSS phải là CSS nên không cần tiền tố.

  3. lời khuyên tốt @osmanraifgunes Nhưng chúng ta đang sống trong năm 2016, vì vậy không cần đến jQuery để hoàn thành nhiệm vụ đơn giản này. Việc sử dụng đơn giản window.onload kết hợp với document.querySelector có thể giải quyết được vấn đề. Ngoài ra, $(document).ready sẽ được kích hoạt sau khi DOM được tải hoàn toàn chứ không phải tất cả tài nguyên trên trang. Để làm điều này, chúng ta cần sử dụng window.onload trong JS thuần túy hoặc $(window).load... trong jQuery

  4. Thay vì sử dụng jQuery Hide(), bạn có thể đặt lớp CSS sau khi nội dung được tải đầy đủ .ẩn giấu Thêm vào trình tải trước... Cách tiếp cận này mang đến cho bạn khả năng sử dụng hoạt ảnh CSS3.

Tôi đã sửa đổi mã của bạn một chút và thêm logic JS, đây là bản demo:

window.onload = function() {
  addCls('.preloader', 'hidden');
}

hàm addCls(bộ chọn, cls) {
  var element = document.querySelector(selector);
  element.classList.add(cls);
}
.container {
  position: relative;
  width: 100%;
}
.container img {
  width: 100%;
}
.holder {
  position: absolute;
  trên cùng: 50%;
  trái: 50%;
  chiều rộng: 93px;
  chiều cao: 10px;
  lề: -5px 0px 0px -46px;
}
.trình tải trước {
  position: fixed;
  background-color: #ffffff;
  width: 100%;
  chiều cao: 100%;
  top: 0;
  left: 0;
  chỉ số z: 100;
  chuyển tiếp: tất cả đều dễ dàng trong 1,5 giây;
}
.preloader.hidden {
  trên cùng: -150%;
  độ mờ: 0;
}
khoảng .preloader {
  display: block;
  chiều rộng: 5px;
  chiều cao: 10px;
  nền: #e43632;
  position: absolute;
  hoạt ảnh: trình tải trước-hoạt hình 2,25 giây dễ dàng ra vào vô hạn;
}
.preloader span:nth-child(2) {
  trái: 11px;
  độ trễ hoạt ảnh: .2s;
}
.preloader span:nth-child(3) {
  trái: 22px;
  độ trễ hoạt hình: .4s;
}
.preloader span:nth-child(4) {
  trái: 33px;
  độ trễ hoạt hình: .6s;
}
.preloader span:nth-child(5) {
  trái: 44px;
  độ trễ hoạt hình: .8s;
}
.preloader span:nth-child(6) {
  trái: 55px;
  độ trễ hoạt hình: 1 giây;
}
.preloader span:nth-child(7) {
  trái: 66px;
  độ trễ hoạt ảnh: 1,2 giây;
}
.preloader span:nth-child(8) {
  trái: 77px;
  độ trễ hoạt hình: 1,4 giây;
}
.preloader span:nth-child(9) {
  trái: 88px;
  độ trễ hoạt hình: 1,6 giây;
}
@keyframes trình tải trước-hoạt hình {
  0% {
    chiều cao: 10px;
    biến đổi: dịchY(0px);
    nền: #fdcf01;
  }
  25% {
    chiều cao: 60px;
    biến đổi: dịchY(15px);
    nền: #4bb846;
  }
  50% {
    chiều cao: 10px;
    biến đổi: dịchY(-10px);
    nền: #2988dd;
  }
  100% {
    chiều cao: 10px;
    biến đổi: dịchY(0px);
    nền: #e43632;
  }
}

Về css - trình tải trước CSS của máy khách, chúng tôi đã tìm thấy một câu hỏi tương tự trên Stack Overflow: https://stackoverflow.com/questions/36228928/

27 4 0
Bài viết khuyến nghị: javascript - Thay đổi mô hình xương sống và Xem cập nhật kết xuất
Bài viết khuyến nghị: Làm cách nào để chuyển đổi một loạt danh sách thành khung dữ liệu trong python?
Bài viết khuyến nghị: Phân tích dữ liệu JSON trong yêu cầu POST của Django AJAX
Bài viết khuyến nghị: html - Trường không nổi sang trái
không gian vũ trụ
Hồ sơ

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá taxi Didi miễn phí
Phiếu giảm giá taxi Didi
Các bài viết phổ biến trên toàn bộ trang web
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress