模拟摩天轮的效果

最新推荐文章于 2021-01-13 20:48:37 发布

weixin_34391854

最新推荐文章于 2021-01-13 20:48:37 发布

阅读量257

点赞数

文章标签： java

原文链接：https://yq.aliyun.com/articles/612560

版权

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>纯CSS3模拟摩天轮效果</title>
<style>
	
.sunline{
	position:relative;
	height: 400px;
	width: 400px;
	border: 2px solid transparent;
	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;

}

.earth{
	margin: auto;
	height: 50px;
	width: 50px;
	background-color: blue;
	/*border-radius: 50%;*/
	animation: -rotate 10s infinite linear;
}

@keyframes rotate{
	100%{transform:rotate(360deg);}
}
@keyframes -rotate{
	100%{transform:rotate(-360deg);}
}
</style>
</head>
<body>

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