自己做的小作品2

李德钧

于 2017-02-13 01:06:40 发布

阅读量334

点赞数 1

文章标签：前端

本文链接：https://blog.csdn.net/qq625739716/article/details/55022240

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/1.css"/>
	</head>
	<body>
		<!-- 太阳 -->
	<div class="sun"></div>
	<!-- 地球的轨道 -->
	<div class="earth-orbit">
		<div class="earth">
			<div class="yueqiuguiji">
				<div class="yueqiu">
				</div>
			</div>
		</div>
	</div>
	</body>
</html>

*{
			margin:0px;
			padding:0px;
		}
		
		body{
			background: #000;
			overflow: hidden;
		}
		
		.sun {
			width: 400px;
			height:400px;
			background: red;
			/*float: left;*/
			/*margin:0 auto;*/
			position: absolute;		/*元素定位设置为绝对定位*/

			top: 50%;
			left: 50%;
			margin-left: -200px;
			margin-top: -200px;		/*让元素在页面中绝对的居中*/

			border-radius: 50%;		/*让元素变成圆形*/
			box-shadow: 0px 0px 85px yellow;
		}
		
		/*@keyframes sun-right {
			0%{margin-top:300px; background: red;}
			100%{margin-top:0px; background: green;}
		}*/

		.earth-orbit{
			width: 800px;
			height: 800px;

			border: 1px dashed #fff;
			border-radius: 50%;
			position: absolute;
			top: 50%;
			left: 50%;
			margin:-400px 0 0 -400px;

			/*transform: rotate(180deg);*/
			
			/*设置动画的基本属性*/
			-webkit-animation: spin-right 15s linear infinite;	/*google*/
			-moz-animation: spin-right 15s linear infinite;		/*firefox*/
			-ms-animation: spin-right 15s linear infinite;		/*IE*/
			-o-animation: spin-right 15s linear infinite;		/*oparn*/
			animation: spin-right 15s linear infinite;
		}
		
		/*设置动画详细的状态动作*/
		@keyframes spin-right{
			0%{
				transform: rotate(0deg);
			}
			100%{
				transform: rotate(360deg);
			}
		}

		.earth{
			width: 150px;
			height: 150px;
			background: blue;
			margin:42px 0 0 42px;
			border-radius: 50%;
			position: relative;
			box-shadow: 0 0 18px white;
		}
		.yueqiuguiji{
			width: 300px;
			height: 300px;
            position: absolute;
			border: 1px dashed #fff;
			border-radius: 50%;
			
			top: 50%;
			left: 50%;
			margin:-150px 0 0 -150px;
			animation: zhuang 10s linear infinite;
		}
		@keyframes zhuang{
			100%{
				transform: rotate(360deg); 
			}
		}
		.yueqiu{
			width: 50px;
			height: 50px;
			background: darkgrey;
			z-index: 20;
			margin:18px 0 0 18px;
			border-radius: 50%;
			box-shadow: 0 0 18px deepskyblue;
		}

这是一个月亮围绕地球转，地球围绕太阳转的小作品

李德钧

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自己做的小作品2

*{ margin:0px; padding:0px; } body{ background: #000; overflow: hidden; } .sun { width: 400px; height:400px; background: red; /*float: left;*/ /*margin:0 auto;
复制链接

扫一扫