Share Code Web - Chia sẻ niềm đam mê bất tận > Lập trình > Web Design > HTML/CSS > Tạo mô hình trái đất và mặt trăng bằng CSS3
Tạo mô hình trái đất và mặt trăng bằng CSS3
Nguyễn Trung Hiếu
Share Code Web Company 2012

Tạo mô hình trái đất và mặt trăng bằng 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é

Related Posts

Tác giả: 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

Leave a comment

Bạn phải Đăng nhập để tham gia bình luận.

https://sharecodeweb.net/?s={search_term_string}

Blog Stats

  • 5.778 hits
%d bloggers like this: