Mở Đầu

Hello! Lại là 1 chuyên mục share code tiếp đây. Ờ thì còn 7 ngày nữa đến tết trung thu rồi, trung thu là dịp cho trẻ em và người lớn quây quần bên nhau gia đình ấm áp đón tết trung thu. Nhắc tới tết trung thu là chúng ta sẽ nghĩ đến ngày món bánh trung thu, chiếc lồng đèn, đồ chơi trung thu đúng không nào? Năm nay trên thị trường có rất nhiều loại bánh trung thu, mẫu mã rất đa dạng và giá thì không quá cao nên bánh trung thu rất được ưa chuộng làm quà tặng cho dịp tết trung thu này.

Nội Dung

Như các bạn đã thấy ở tiêu đề và nội dung mình nhắc tới ở phần mở đầu. Thì nay mình sẽ share code loading trang trí blog dịp tết trung siêu dẹp cho anh em. Code này mình có tham khảo nhiều tài liệu và viết vại để chia sẻ.

Chia sẻ Code loading blogspot dịp tết trung thu

Xem Mẫu

Code loading blogspot dịp tết trung thu

Cách sử dụng: Để dùng được thì anh em chỉ cần copy mã sau và dán vào phần chỗ anh em muốn để nhưng lưu ý là phải thêm vào trước thẻ đóng

</body>

 <style>
/* Tổng thể hiệu ứng loading */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0c1445; /* Màu nền đêm */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.8s ease, visibility 0.8s;
    visibility: visible;
    opacity: 1;
}

/* Container chính cho loader */
.mooncakes-loader {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Mặt trăng */
.moon {
    width: 120px;
    height: 120px;
    background-color: #f8f8a2;
    border-radius: 50%;
    box-shadow: 0 0 40px #f8f8a2, 0 0 60px #f8f8a2;
    position: absolute;
    top: -60px; /* Điều chỉnh vị trí của mặt trăng */
    z-index: 1;
}

/* Đèn lồng */
.lantern {
    width: 100px;
    height: 100px;
    position: relative;
    z-index: 2;
    animation: swing 2.5s ease-in-out infinite;
    transform-origin: top center;
}

/* Ngôi sao của đèn lồng */
.lantern .star {
    width: 100%;
    height: 100%;
    background-color: #ff5722;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    animation: spin 3s linear infinite;
}

/* Dòng chữ "Đang tải..." */
.loading-text {
    margin-top: 130px; /* Khoảng cách từ đèn lồng xuống chữ */
    color: #f8f8a2;
    font-size: 1.2em;
    font-family: Arial, sans-serif;
    letter-spacing: 1px;
    animation: blink 1.5s linear infinite;
}

/* Keyframes cho chuyển động */
@keyframes swing {
    0%, 100% { transform: rotate(10deg); }
    50% { transform: rotate(-10deg); }
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
</style>

<div class='loading-overlay'>
    <div class='mooncakes-loader'>
        <div class='moon'></div>
        <div class='lantern'>
            <div class='star'></div>
        </div>
        <p class='loading-text'>Đang tải...</p>
    </div>
</div>

<script>
// Sử dụng sự kiện 'load' của window để đảm bảo tất cả tài nguyên (ảnh, css) đã được tải xong
window.addEventListener('load', function() {
    const loadingOverlay = document.querySelector('.loading-overlay');
    if (loadingOverlay) {
        // Làm cho màn hình loading mờ dần đi
        loadingOverlay.style.opacity = '0';
        loadingOverlay.style.visibility = 'hidden';
    }
});
</script>

Lời kết

Trên đây là mình Chia sẻ Code loading blogspot dịp tết trung thu. Chúc các bạn một ngày học tập và làm việc thật hiệu quả. Xin chào và hẹn gặp lại!

Copyright © Trick Pro