太阳地球月亮运行动画

hulan 发布于 12-20 14:21 浏览:101 类型:原创 - 随笔 分类:JavaScript - layer 作者原创 版权保护
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<script src="https://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
	<style type="text/css">
	body{
	background: #000;
	}
		.sun{
			width: 280px;
			height: 280px;
			margin-top: 200px;
			margin-left: 300px;
			border:1px solid #FFA500;
            background:#FFA500;
			border-radius: 50%;
            box-shadow:0px 0px 35px #FFA500;
			animation:action 10s;
			animation-iteration-count:infinite;
			animation-timing-function:linear;
		}
		@keyframes action{
			0% { transform: rotate(0deg) }
			100% { transform: rotate(360deg)}
		}
		.earth{
			border:1px solid #0000CC;
            background:#0000CC;
            box-shadow:0px 0px 35px #0000CC;
			width: 40px;
			height: 40px;
			border-radius: 50%;
			margin-left: -90px;
			animation:actions 5s;
			animation-iteration-count:infinite;
			animation-timing-function:linear;
		}
		@keyframes actions{
			0% { transform: rotate(0deg) }
			100% { transform: rotate(360deg)}
		}
		.moon{
			border:1px solid #F0F0F0;
            background:#F0F0F0;
            box-shadow:0px 0px 35px #F0F0F0;
			width: 10px;
			height: 10px;
			border-radius: 50%;
			margin-left: -20px;		
		}		
	</style>
</head>
<body>

<div class="sun">  
	<div class="earth">       
		<div class="moon"></div>
	</div>
</div>

</body>
</html>

 

z
给个赞 11 人点赞
收藏 0 人收藏
hulan 作者

这家伙什么都没留下

作者最新