[Share Code] Toggle Switch Chuyển đổi hiệu ứng ngày đêm

Đoạn mã này tạo ra một công tắc chuyển đổi giữa hai chế độ: chế độ ngày và chế độ đêm. Khi người dùng nhấn vào công tắc, giao diện sẽ thay đổi hình ảnh từ mặt trời sang mặt trăng và ngược lại. Hiệu ứng này giúp cải thiện trải nghiệm người dùng, đặc biệt là khi sử dụng trong môi trường có độ sáng khác nhau.

Tải về bộ Source nút Toggle Switch ngày đêm tại đây (Google Drive)

Cấu trúc HTML

HTML trong đoạn mã chủ yếu bao gồm:

Một <label> chứa toàn bộ công tắc chuyển đổi.

Một <input type="checkbox"> để kiểm soát trạng thái bật/tắt.

Một <div class="theme-switch__container"> chứa các thành phần hiển thị như mây, sao, mặt trời, mặt trăng.

SVG được sử dụng để tạo hình các ngôi sao.

Các div con như theme-switch__moon, theme-switch__sun-moon-container mô phỏng mặt trời và mặt trăng.

Có thể bạn quan tâm:

• Dịch vụ thiết kế website
• Dịch vụ Hosting giá rẻ

CSS và cách hoạt động

Các biến CSS

Đoạn CSS sử dụng các biến để dễ dàng điều chỉnh giao diện. Một số biến quan trọng:

--container-light-bg: Màu nền khi ở chế độ ngày.

--container-night-bg: Màu nền khi ở chế độ đêm.

--sun-bg: Màu của mặt trời.

--moon-bg: Màu của mặt trăng.

--transition: Hiệu ứng chuyển đổi giữa ngày và đêm.

Hiệu ứng chuyển đổi

Khi checkbox được chọn, các phần tử CSS sẽ thay đổi bằng hiệu ứng transition, làm cho mặt trời di chuyển sang một bên và mặt trăng xuất hiện.

Các ngôi sao và đám mây cũng được ẩn/hiện dựa vào trạng thái của checkbox.

Hiệu ứng bóng và ánh sáng

box-shadow được sử dụng để tạo bóng cho các thành phần.

filter: drop-shadow(...) giúp tạo hiệu ứng ánh sáng mềm mại.

Cách sử dụng

Người dùng chỉ cần nhấp vào công tắc để chuyển đổi giữa chế độ ngày và đêm. Hiệu ứng mượt mà giúp tăng tính trực quan và trải nghiệm tốt hơn trên giao diện web.

Kết luận

Đây là một đoạn mã hữu ích và sáng tạo, giúp cải thiện trải nghiệm người dùng bằng cách cho phép họ dễ dàng thay đổi chế độ giao diện. Với việc sử dụng hiệu ứng CSS mượt mà, nó mang lại cảm giác sống động và thân thiện hơn khi sử dụng.