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

Xem: 1397    Tải: 48   Thảo luận: 0   Mục: HTML-CSS template   Lĩnh vực: Khác

0 điểm   ( 3 đánh giá ) File đã được kiểm thử

1 MEGA [megacode]tao-mo-hinh-trai-dat-va-mat-trang.rar (130.64 KB)
Phí tải ~ 2,000 đ

Bạn cần phải Đăng nhập để tải file [megacode]tao-mo-hinh-trai-dat-va-mat-trang.rar
Nếu bạn chưa có tài khoản thì Đăng ký miễn phí tại đây

Báo lỗi download   Báo vi phạm bản quyền

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 và 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.

Tổng đài hỗ trợ KT: (+844) 6. 32.979.36 - Hotline: 0969.091.265
Hỗ trợ KT từ: 8h-17h30 các ngày trong tuần trừ chiều T7, CN và các ngày lễ;
Hỗ trợ kỹ thuật (KT) và cam kết chất lượng:
1. Code đảm bảo chất lượng giống demo 100%
2. Hỗ trợ cài đặt code cho khách hàng
3. Hỗ trợ hướng dẫn sử dụng cho khách hàng
Mega download: 1 MEGA = 2.000đ

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 và 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 và 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 đã
       <div id="moon_holder">
          <div id="moon_back"></div>
          <img  src="moon2.png"   id="moon">
            <div id="moon_ball"></div>
        </div>
 
        <div id="center" align="center">
            <div id="earth_holder">
                <div id="earth_ball"></div>
                <div id="earth_glow"></div>
                <div id="earth"></div>
            </div>
        </div>
Đầu tiên là style cho đoạn “xương” bằng HTML bên trên nhé
body {
  background: #fff url("http://lab.legomushroom.com/___img/sky_star2.jpg") 0px 0px;
 
  -ms-overflow-x: hidden;
  overflow-x: hidden;
  margin: 0;
 
    -webkit-animation: sky 80s linear infinite;
    -moz-animation: sky 80s linear infinite;
    -ms-animation: sky 80s linear infinite;
    -o-animation: sky 80s linear infinite;
    animation: sky 80s linear infinite;
}
 
body div#moon_holder {
    position: absolute;
    left: -30%;
    bottom: 60px;
    z-index: 6;
 
    -webkit-animation: launch_moon 240s linear infinite;
    -moz-animation: launch_moon 240s linear infinite;
    -ms-animation: launch_moon 240s linear infinite;
    -o-animation: launch_moon 240s linear infinite;
    animation: launch_moon 240s linear infinite;
}
 
body div#moon_holder img#moon {
    width: 90px;
    height: 90px;
    border-radius: 90px;
    position: absolute;
    z-index: 0;
 
    -webkit-animation: launch_moon_size 60s linear infinite;
    -moz-animation: launch_moon_size 60s linear infinite;
    -ms-animation: launch_moon_size 60s linear infinite;
    -o-animation: launch_moon_size 60s linear infinite;
    animation: launch_moon_size 60s linear infinite;
 
    -webkit-box-shadow: -400px -30px 20px rgba(0,0,0,0.50);
    box-shadow: -400px -30px 20px rgba(0,0,0,0.50);
}
 
body div#moon_holder div#moon_ball {
    z-index: 1;
    position: absolute;
    width: 90px;
    height: 90px;
    border-radius: 90px;
    margin: 1px 1px 0px 0px;
 
    -webkit-box-shadow: inset 20px -10px 37px #000, inset 0 0 27px #000;
    box-shadow: inset 20px -10px 37px #000, inset 0 0 27px #000;
 
    -webkit-animation: launch_moon_ball_size 240s linear infinite;
    -moz-animation: launch_moon_ball_size 240s linear infinite;
    -ms-animation: launch_moon_ball_size 240s linear infinite;
    -o-animation: launch_moon_ball_size 240s linear infinite;
    animation: launch_moon_ball_size 240s linear infinite;
}
 
body div#moon_holder div#moon_back {
    width: 90px;
    height: 90px;
    border-radius: 90px;
    position: absolute;
    z-index: 0;
    background-color: #000;
 
    -webkit-animation: launch_moon_ball_size 240s linear infinite;
    -moz-animation: launch_moon_ball_size 240s linear infinite;
    -ms-animation: launch_moon_ball_size 240s linear infinite;
    -o-animation: launch_moon_ball_size 240s linear infinite;
    animation: launch_moon_ball_size 240s linear infinite;
}
 
body div#earth_holder {
    position: static;
    z-index: 1;
    width: 200px;
    height: 200px;
    border-radius: 200px;
    margin-top: 11%;
}
 
body div#earth_holder div#earth {
    z-index: 2;
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 200px;
    background: url("http://lab.legomushroom.com/___img/11.jpg") 0px 0px;
 
    -webkit-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
    -o-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    transform: rotate(20deg);
 
    -webkit-box-shadow: inset 1px -3px 14px rgba(0,0,0,0.60), inset 0 0 67px #000, inset 0 0 20px rgba(0,0,0,0.50), -400px -30px 130px rgba(0,0,0,0.50);
    box-shadow: inset 1px -3px 14px rgba(0,0,0,0.60), inset 0 0 67px #000, inset 0 0 20px rgba(0,0,0,0.50), -400px -30px 130px rgba(0,0,0,0.50);
 
    -webkit-animation: rotate_earth 40s linear infinite;
    -moz-animation: rotate_earth 40s linear infinite;
    -ms-animation: rotate_earth 40s linear infinite;
    -o-animation: rotate_earth 40s linear infinite;
    animation: rotate_earth 40s linear infinite;
}
 
body div#earth_holder div#earth_glow {
    z-index: 4;
 
    -webkit-box-shadow: 0 0px 19px rgba(79,156,201,0.80);
    box-shadow: 0 0px 19px rgba(79,156,201,0.80);
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 200px;
}
 
body div#earth_holder div#earth_ball {
    z-index: 3;
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 200px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=74)";
    filter: alpha(opacity=74);
    opacity: 0.74;
 
    -webkit-box-shadow: inset 40px -40px 80px #000, inset 20px -20px 100px #000;
    box-shadow: inset 40px -40px 80px #000, inset 20px -20px 100px #000;
}
Để 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
@keyframes "rotate_earth" {
0% {
    background-position: 0px -2px;
}
50% {
    background-position: 205px -2px;
}
100% {
    background-position: 410px -2px;
}
 
}
 
@-moz-keyframes rotate_earth {
0% {
   background-position: 0px -2px;
}
50% {
   background-position: 205px -2px;
}
100% {
   background-position: 410px -2px;
}
 
}
 
@-webkit-keyframes "rotate_earth" {
0% {
   background-position: 0px -2px;
}
50% {
   background-position: 205px -2px;
}
100% {
   background-position: 410px -2px;
}
 
}
 
@-ms-keyframes "rotate_earth" {
0% {
   background-position: 0px -2px;
}
50% {
   background-position: 205px -2px;
}
100% {
   background-position: 410px -2px;
}
 
}
 
@-o-keyframes "rotate_earth" {
0% {
   background-position: 0px -2px;
}
50% {
   background-position: 205px -2px;
}
100% {
   background-position: 410px -2px;
}
 
}
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
@keyframes "launch_moon" {
25% {
    z-index: 6;
}
50% {
    left: 140%;
       bottom: 600px;
       z-index: 0;
}
55% {
    bottom: 680px;
}
75% {
    z-index: 0;
}
100% {
    left: -30%;
       z-index: 6;
       bottom: 100px;
}
 
}
 
@-moz-keyframes launch_moon {
25% {
   z-index:6;
    }
50% {
   left: 140%;
   bottom: 600px;
   z-index: 0;
}
55% {
   bottom: 680px;
}
75% {
   z-index: 0;
}
100% {
   left: -30%;
   z-index: 6;
   bottom: 100px;
}
 
}
 
@-webkit-keyframes "launch_moon" {
25% {
   z-index: 6;
}
50% {
   left: 140%;
   bottom: 600px;
   z-index: 0;
}
55% {
   bottom: 680px;
}
75% {
   z-index: 0;
}
100% {
   left: -30%;
   z-index: 6;
   bottom: 100px;
}
 
}
 
@-ms-keyframes "launch_moon" {
25% {
   z-index: 6;
}
50% {
   left: 140%;
   bottom: 600px;
   z-index: 0;
}
55% {
   bottom: 680px;
}
75% {
   z-index: 0;
}
100% {
   left: -30%;
   z-index: 6;
   bottom: 100px;
}
 
}
 
@-o-keyframes "launch_moon" {
25% {
   z-index: 6;
}
50% {
   left: 140%;
   bottom: 600px;
   z-index: 0;
}
55% {
   bottom: 680px;
}
75% {
   z-index: 0;
}
100% {
   left: -30%;
   z-index: 6;
   bottom: 100px;
}
 
}
 
@keyframes "launch_moon_size" {
0% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
       filter: alpha(opacity=100);
       opacity: 1;
}
50% {
    -webkit-transform: scale(1.2, 1.2);
       -moz-transform: scale(1.2, 1.2);
       -o-transform: scale(1.2, 1.2);
       -ms-transform: scale(1.2, 1.2);
       transform: scale(1.2, 1.2);
       -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
       filter: alpha(opacity=100);
       opacity: 1;
}
55% {
    -webkit-transform: scale(0.8, 0.8);
       -moz-transform: scale(0.8, 0.8);
       -o-transform: scale(0.8, 0.8);
       -ms-transform: scale(0.8, 0.8);
       transform: scale(0.8, 0.8);
       -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
       filter: alpha(opacity=70);
       opacity: 0.7;
}
75% {
    -webkit-transform: scale(0.7, 0.7);
       -moz-transform: scale(0.7, 0.7);
       -o-transform: scale(0.7, 0.7);
       -ms-transform: scale(0.7, 0.7);
       transform: scale(0.7, 0.7);
       -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=35)";
       filter: alpha(opacity=35);
       opacity: 0.35;
}
100% {
    -webkit-transform: scale(0.9, 0.9);
       -moz-transform: scale(0.9, 0.9);
       -o-transform: scale(0.9, 0.9);
       -ms-transform: scale(0.9, 0.9);
       transform: scale(0.9, 0.9);
       -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
       filter: alpha(opacity=70);
       opacity: 0.7;
}
 
}
 
@-moz-keyframes launch_moon_size {
0% {
   filter: alpha(opacity=100);
   opacity: 1;
}
50% {
   -moz-transform: scale(1.2, 1.2);
   transform: scale(1.2, 1.2);
   filter: alpha(opacity=100);
   opacity: 1;
}
55% {
   -moz-transform: scale(0.8, 0.8);
   transform: scale(0.8, 0.8);
   filter: alpha(opacity=70);
   opacity: 0.7;
}
75% {
   -moz-transform: scale(0.7, 0.7);
   transform: scale(0.7, 0.7);
   filter: alpha(opacity=35);
   opacity: 0.35;
}
100% {
   -moz-transform: scale(0.9, 0.9);
   transform: scale(0.9, 0.9);
   filter: alpha(opacity=70);
   opacity: 0.7;
}
 
}
@-webkit-keyframes "launch_moon_size" {
0% {
   filter: alpha(opacity=100);
   opacity: 1;
}
50% {
   -webkit-transform: scale(1.2, 1.2);
   transform: scale(1.2, 1.2);
   filter: alpha(opacity=100);
   opacity: 1;
}
55% {
   -webkit-transform: scale(0.8, 0.8);
   transform: scale(0.8, 0.8);
   filter: alpha(opacity=70);
   opacity: 0.7;
}
75% {
   -webkit-transform: scale(0.7, 0.7);
   transform: scale(0.7, 0.7);
   filter: alpha(opacity=35);
   opacity: 0.35;
}
100% {
   -webkit-transform: scale(0.9, 0.9);
   transform: scale(0.9, 0.9);
   filter: alpha(opacity=70);
   opacity: 0.7;
}
 
}
 
@-ms-keyframes "launch_moon_size" {
0% {
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}
50% {
   -ms-transform: scale(1.2, 1.2);
   transform: scale(1.2, 1.2);
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}
55% {
   -ms-transform: scale(0.8, 0.8);
   transform: scale(0.8, 0.8);
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
   filter: alpha(opacity=70);
   opacity: 0.7;
}
75% {
   -ms-transform: scale(0.7, 0.7);
   transform: scale(0.7, 0.7);
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=35)";
   filter: alpha(opacity=35);
   opacity: 0.35;
}
100% {
   -ms-transform: scale(0.9, 0.9);
   transform: scale(0.9, 0.9);
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
   filter: alpha(opacity=70);
   opacity: 0.7;
}
 
}
 
@-o-keyframes "launch_moon_size" {
0% {
   filter: alpha(opacity=100);
   opacity: 1;
}
50% {
   -o-transform: scale(1.2, 1.2);
   transform: scale(1.2, 1.2);
   filter: alpha(opacity=100);
   opacity: 1;
}
55% {
   -o-transform: scale(0.8, 0.8);
   transform: scale(0.8, 0.8);
   filter: alpha(opacity=70);
   opacity: 0.7;
}
75% {
   -o-transform: scale(0.7, 0.7);
   transform: scale(0.7, 0.7);
   filter: alpha(opacity=35);
   opacity: 0.35;
}
100% {
   -o-transform: scale(0.9, 0.9);
   transform: scale(0.9, 0.9);
   filter: alpha(opacity=70);
   opacity: 0.7;
}
 
}
 
@keyframes "launch_moon_ball_size" {
50% {
    -webkit-transform: scale(1.2, 1.2);
       -moz-transform: scale(1.2, 1.2);
       -o-transform: scale(1.2, 1.2);
       -ms-transform: scale(1.2, 1.2);
       transform: scale(1.2, 1.2);
}
55% {
    -webkit-transform: scale(0.8, 0.8);
       -moz-transform: scale(0.8, 0.8);
       -o-transform: scale(0.8, 0.8);
       -ms-transform: scale(0.8, 0.8);
       transform: scale(0.8, 0.8);
}
75% {
    -webkit-transform: scale(0.7, 0.7);
       -moz-transform: scale(0.7, 0.7);
       -o-transform: scale(0.7, 0.7);
       -ms-transform: scale(0.7, 0.7);
       transform: scale(0.7, 0.7);
}
100% {
    -webkit-transform: scale(0.9, 0.9);
       -moz-transform: scale(0.9, 0.9);
       -o-transform: scale(0.9, 0.9);
       -ms-transform: scale(0.9, 0.9);
       transform: scale(0.9, 0.9);
}
 
}
 
@-moz-keyframes launch_moon_ball_size {
50% {
   -moz-transform: scale(1.2, 1.2);
   transform: scale(1.2, 1.2);
}
55% {
   -moz-transform: scale(0.8, 0.8);
   transform: scale(0.8, 0.8);
}
75% {
   -moz-transform: scale(0.7, 0.7);
   transform: scale(0.7, 0.7);
}
100% {
   -moz-transform: scale(0.9, 0.9);
   transform: scale(0.9, 0.9);
}
 
}
 
@-webkit-keyframes "launch_moon_ball_size" {
50% {
   -webkit-transform: scale(1.2, 1.2);
   transform: scale(1.2, 1.2);
}
55% {
   -webkit-transform: scale(0.8, 0.8);
   transform: scale(0.8, 0.8);
}
75% {
   -webkit-transform: scale(0.7, 0.7);
   transform: scale(0.7, 0.7);
}
100% {
   -webkit-transform: scale(0.9, 0.9);
   transform: scale(0.9, 0.9);
}
 
}
 
@-ms-keyframes "launch_moon_ball_size" {
50% {
   -ms-transform: scale(1.2, 1.2);
   transform: scale(1.2, 1.2);
}
55% {
   -ms-transform: scale(0.8, 0.8);
   transform: scale(0.8, 0.8);
}
75% {
   -ms-transform: scale(0.7, 0.7);
   transform: scale(0.7, 0.7);
}
100% {
   -ms-transform: scale(0.9, 0.9);
   transform: scale(0.9, 0.9);
}
 
}
 
@-o-keyframes "launch_moon_ball_size" {
50% {
   -o-transform: scale(1.2, 1.2);
   transform: scale(1.2, 1.2);
}
55% {
   -o-transform: scale(0.8, 0.8);
   transform: scale(0.8, 0.8);
}
75% {
   -o-transform: scale(0.7, 0.7);
   transform: scale(0.7, 0.7);
}
100% {
   -o-transform: scale(0.9, 0.9);
   transform: scale(0.9, 0.9);
}
 
}
 
@keyframes "sky" {
50% {
    background-position: 318px 212px;
}
100% {
    background-position: 635px 423px;
}
 
}
 
@-moz-keyframes sky {
50% {
   background-position: 318px 212px;
}
100% {
   background-position: 635px 423px;
}
 
}
 
@-webkit-keyframes "sky" {
50% {
   background-position: 318px 212px;
}
100% {
   background-position: 635px 423px;
}
 
}
 
@-ms-keyframes "sky" {
50% {
   background-position: 318px 212px;
}
100% {
   background-position: 635px 423px;
}
 
}
 
@-o-keyframes "sky" {
50% {
   background-position: 318px 212px;
}
100% {
   background-position: 635px 423px;
}
 
}
OKie, vậy là xong rồi đó. Thử trải nghiệm xem sao nhé

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 Đăng ngày 19-09-2014  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 và 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. 5/10 1397

Thảo luận:

Để bình luận bạn phải đăng nhập thành viên.

File tương tự

Files cùng mục

 

File tải nhiều nhất

Megacode.vn - Thư viện mã nguồn chia sẻ, tải file cho cộng đồng
Copyright © 2013-2016. All rights reserved. Bản quyền thuộc VinaGon
Địa chỉ: Số 38 Hàng Bè, Hàng Bạc, Hoàn Kiếm, Hà Nội.
Văn phòng giao dịch: Phòng 28, Tầng 6, HH1A Linh Đàm, Hoàng Mai, Hà Nội
Email: info@vinagon.com | Website: www.vinagon.com | Điện thoại: (+844) 6. 32.979.36;
logo megacode

Megacode đã đăng ký với Bộ Công Thương
Thư viện mã nguồn mở lớn nhất Việt Nam.



Hỗ trợ khách hàng trên Megacode
Hỗ trợ kỹ thuật cho thành viên:
Tổng đài: (+844) 6. 32.979.36
Số di động (Hotline): 0969.091.265
Thời gian làm việc:
Sáng: 8h-12h; Chiều: 13h30-17h30
(Nghỉ chiều T7, CN và các ngày lễ, tết)
Chat với Megacode
https://www.facebook.com/megacodevn