模拟摩天轮的效果

简介: 纯CSS3模拟摩天轮效果 .sunline{ position:relative; height: 400px; width: 400px; border: 2px solid transparent; border-radius: 50%; margin: 50px 0...
<!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>

  

目录
相关文章
|
9月前
函数的模拟实现
函数的模拟实现
54 0
|
9月前
模拟队列训练
模拟队列训练
45 0
|
2月前
|
算法
【算法】模拟
替换所有问号,提莫攻击,z字形变换,外观数列,数青蛙
|
3月前
|
前端开发 JavaScript
模拟 new 的实现
模拟 `new` 实现是指在 JavaScript 中,通过自定义函数来模拟内置的 `new` 操作符的行为,以便更好地理解其工作原理和对象构造过程。这种方式通常涉及创建一个新对象、绑定原型链、执行构造函数等步骤。
|
6月前
|
XML 传感器 算法
SFNC —— 模拟控制(五)
SFNC —— 模拟控制(五)
53 3
|
9月前
|
C语言
深入理解并模拟实现函数
深入理解并模拟实现函数
|
9月前
|
图形学 Python
物理光学:光的探索与编程模拟
物理光学:光的探索与编程模拟
84 0
|
9月前
函数的模拟实现1
函数的模拟实现1
69 0
|
Python
抽卡程序模拟
抽卡程序模拟
166 0
|
SQL 监控 前端开发
模拟数据在实际场景中的应用
模拟数据在实际场景中的应用
196 0
模拟数据在实际场景中的应用

热门文章

最新文章