Tạo hiệu ứng chuyển động của trái đất và mặt trăng bằng CSS3

Cập nhật: Lượt xem: 479 [ Css ]

Trong bài này, Tôi xin giới thiệu một sản phẩm CSS3 Animation Mô phỏng Trái Đất và Mặt Trăng Hiệu Ứng chuyển động

Tạo hiệu ứng chuyển động của trái đất và mặt trăng bằng CSS3

HTML

<div class="page">
	<div class="wrapper">
		<div class="earth">
			<div class="clouds"></div>
		</div>
		<div class="moon"></div>
	</div>
</div>

CSS Animation

Hiệu ứng chuyển động

@-webkit-keyframes rotate{
	from {
    background-position: 0 0;
  }
  to {
    background-position: -1000px 0;
  }
}

Trái Đất Đứng im chỉ có mây chuyển động

.clouds{
	position: absolute;
	margin: auto;
	border-radius: 50%;
	background: url('Earth-clouds.png') repeat;
	background-position: 0 0;
  background-size: auto 100%;
	-webkit-box-shadow: inset -25px -5px 40px 20px rgba(0,0,0,1);
	        box-shadow: inset -25px -5px 40px 20px rgba(0,0,0,1);
	width: 350px;
	height: 350px;
	z-index: 10;
	opacity: .3;
	-webkit-animation: rotate 300s linear infinite;
	        animation: rotate 300s linear infinite;
}

Mặt Trăng chuyển động

.moon{
	position: absolute;
	top: 30%;
	left: 110%;
	z-index: 11;
	-webkit-transform: rotateZ(1.5deg) translate(-110%,-30%);
	    -ms-transform: rotate(1.5deg) translate(-110%,-30%);
	        transform: rotateZ(1.5deg) translate(-110%,-30%);
	margin: auto;
	border-radius: 50%;
	background: url('moon.jpg') repeat;
	background-position: 0 0;
  background-size: auto 100%;
	-webkit-box-shadow: inset -5px -1px 20px 5px rgba(0,0,0,.9),inset 0 0 75px 20px rgba(255,255,255,.3);
	        box-shadow: inset -5px -1px 20px 5px rgba(0,0,0,.9),inset 0 0 75px 20px rgba(255,255,255,.3);
	width: 80px;
	height: 80px;
	z-index: 1;
	        -webkit-animation: rotate 300s linear infinite;
	                animation: rotate 300s linear infinite;
}

Css trái đất

.earth{
	position: absolute;
	top: 60%;
	left: 50%;
	        -webkit-transform: rotateZ(23.5deg) translate(-50%,-50%);
	            -ms-transform: rotate(23.5deg) translate(-50%,-50%);
	                transform: rotateZ(23.5deg) translate(-50%,-50%);
	margin: auto;
	border-radius: 50%;
	background: url('earth.jpg') repeat;
	background-position: 0 0;
  background-size: auto 100%;
	-webkit-box-shadow: 0 0 35px 2px rgba(173,216,230,.7), inset -25px -5px 40px 20px rgba(0,0,0,.9), inset 0 0 200px 10px rgba(173,216,230,.5);
	        box-shadow: 0 0 35px 2px rgba(173,216,230,.7), inset -25px -5px 40px 20px rgba(0,0,0,.9), inset 0 0 200px 10px rgba(173,216,230,.5);
	width: 350px;
	height: 350px;
	z-index: 1;
	-webkit-filter: brightness(.8);
	        filter: brightness(.8);
	-webkit-animation: rotate 450s linear infinite;
	        animation: rotate 450s linear infinite;
}

Css nền Bầu Trời Sao

.page{
    position: relative;
    background: url('2k_stars.jpg') repeat center center fixed;
    background-size: cover;
}