纯CSS3模拟星体旋转效果

简介: 纯CSS3模拟星体旋转效果.box{ transform: scale(0.5); position: relative; padding: 1px; height: 300px; width: 300px; margin:100px auto;} .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>纯CSS3模拟星体旋转效果</title>
<style>
.box{
	transform: scale(0.5);
	position: relative;
	padding: 1px;
	height: 300px;
	width: 300px;
	margin:100px auto;
}	
.sunline{
	position:relative;
	height: 400px;
	width: 400px;
	border: 2px solid black;
	border-radius: 50%;
	margin: 50px 0 0 50px;
	display: flex;
	animation: rotate 10s infinite linear;
}
.sun{
	height: 100px;
	width: 100px;
	margin: auto;
	background-color: red;
	border-radius: 50%;
	box-shadow: 5px 5px 10px red,-5px -5px 10px red,5px -5px 10px red,-5px 5px 10px red;
}
.earthline{
	position: absolute;
	right: 0;
	top: 50%;
	height: 200px;
	width: 200px;
	margin: -100px -100px 0 0;
	border: 1px solid black;
	border-radius: 50%;
	display: flex;
	animation: rotate 2s infinite linear;
}
.earth{
	margin: auto;
	height: 50px;
	width: 50px;
	background-color: blue;
	border-radius: 50%;
}
.moon{
	position: absolute;
	left: 0;
	top: 50%;
	height: 20px;
	width: 20px;
	margin: -10px 0 0 -10px;
	background-color: black;
	border-radius: 50%;
}
@keyframes rotate{
	100%{transform:rotate(360deg);}
}
</style>
</head>
<body>

<div class="box">
	<div class="sunline">
		<div class="sun"></div>
		<div class="earthline">
			<div class="earth"></div>
			<div class="moon"></div>
		</div>
	</div>
</div>
</body>
</html>

  

目录
相关文章
|
15天前
CSS3自动旋转正方体3D特效
CSS3自动旋转正方体3D特效
27 3
CSS3自动旋转正方体3D特效
|
5月前
HTML+CSS制作3D旋转相册
HTML+CSS制作3D旋转相册
|
5月前
|
前端开发
HTML+CSS制作旋转的loading效果
HTML+CSS制作旋转的loading效果
|
8月前
|
前端开发
css三角号旋转90度,上下移动动画效果demo效果(整理)
css三角号旋转90度,上下移动动画效果demo效果(整理)
CSS3鼠标悬停360度旋转效果
CSS3鼠标悬停360度旋转效果
|
9月前
|
前端开发
【CSS动画02--卡片旋转3D】
【CSS动画02--卡片旋转3D】
|
9月前
|
前端开发
css制作旋转的太极
css制作旋转的太极
46 0
|
9月前
|
前端开发
CSS transform实现按钮边框旋转效果
CSS transform实现按钮边框旋转效果
101 1
|
10月前
|
前端开发
css3 效果全(旋转,放大,倾斜,平移)
css3 效果全(旋转,放大,倾斜,平移)
79 0
|
10月前
|
前端开发 数据可视化
漏刻有时数据可视化大屏常用排版HTML和CSS动画(1):旋转动画
漏刻有时数据可视化大屏常用排版HTML和CSS动画(1):旋转动画
170 0