Tạo mô hình trái đất và mặt trăng bằng CSS3

the earth and the moon animation using css3

Lâu lâu mới quay lại blog, nay share cho anh em một đoạn code viết bằng HTML CSS tạo mô hình trái đất và mặt trăng. Trong đó trái đất sẽ quay quanh chính nó, còn mặt trăng sẽ quay quanh trái đất.

Cũng như nhiều lần share code web chỉ bằng HTML CSS thì việc có demo ảnh và online là không có, bắt buộc bạn phải tự mình làm để chiêm ngưỡng thành quả thôi. Thế mới thú vị, phải không nào.

OK. Để làm được cái này, chúng ta cần chuẩn bị những thứ sau

Trước tiên ta thiết kế bằng HTML trước đã

Đầu tiên là style cho đoạn “xương” bằng HTML bên trên nhé

Để cho trái đất tự quay quanh mình nó, và biến cái bản đồ rộng kia thành hình trái đất tròn, ta dùng đoạn CSS sau

Tiếp theo là mặt trăng quay quanh trái đất. Việc style này sẽ phải tính tới hiệu ứng xa gần đối với màn hình. Hơn nữa hiệu ứng bầu trời đầy sao cũng phải di chuyển theo để tạo cảm giác rằng trái đất chúng ta đang di chuyển

OKie, vậy là xong rồi đó. Thử trải nghiệm xem sao nhé

Nguyễn Trung Hiếu

Một blogger ... cùi bắp! Đơn giản: tôi muốn ghi lại những gì xảy ra xung quanh, cả công việc lẫn cuộc sống và chia sẻ với các bạn đọc. Nếu bạn cảm thấy bài viết có nhiều điểm không chính xác, hãy comment và chia sẻ để tôi còn được học hỏi từ những góp ý của bạn. Email: hieunt.dcn@gmail.com