H5 CSS3环形动画

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>CSS3环形动画</title>
<style type="text/css">
*{margin: 0;padding: 0;}
	body{ margin: 50px; text-align: center;}
	h3{clear: both; overflow: hidden; text-align: left;}
	.box{
		border-radius:100%;
		padding: 20px;
		width: 300px;
		height: 300px;
		background: yellow;
		color: #fff;
		float: left;
	}
	.text{
		margin-top: 100px;
		text-align: center;
		font-size: 20px;
		font-weight: bold;
		color: #f00;
	}
	.box .ball{
		border-radius: 100%;
		width: 50px;
		height: 50px;
		font:bold 14px/50px Arial;
		text-align: center;
		background: blue;
		margin: 0 auto;
	}
	@keyframes spin{
		to{transform: rotate(1turn);}
	}
	.box1 .ball{
		animation:spin 3s infinite linear;
		transform-origin: 50% 50%;
	}
	.box2 .ball{
		animation:spin 3s infinite linear;
		transform-origin: 50% 150px;
	}
	@keyframes spin-reverse{
		from{
			transform:rotate(1turn);
		}
	}
	.box3 .ball{
		animation:spin 3s infinite linear;
		transform-origin: 50% 150px;
	}
	.box3 .inner{
		animation: spin-reverse 3s infinite linear;
	}

	.box4 .ball{
		animation:spin 3s infinite linear;
		transform-origin:50% 150px;
	}
	.box4 .inner{
		animation:inherit;
		animation-direction: reverse;
	}
	@keyframes spin2{
		from{
			transform: translate(50%, 150px)
			rotate(0turn)
			translate(-50%, -150px)
			translate(50%,50%)
			rotate(1turn)
			translate(-50%,-50%)
		}
		to{
			transform: translate(50%, 150px)
			rotate(1turn)
			translate(-50%, -150px)
			translate(50%,50%)
			rotate(0turn)
			translate(-50%,-50%)
		}
	}
	.box5 .ball{
		animation:  spin2 3s infinite linear;
	}
</style>
</head>
<body>
<h3 id="#demo1">演示1</h3>
<div class="box box1">
	<div class="ball">Ball</div>
	<div class="text">http://onestopweb.iteye.com/</div>
</div>
<div class="box box2">
	<div class="ball">Ball</div>
	<div class="text">一站式共享网络</div>
</div>
<h3 id="demo2">演示2</h3>
<div class="box box3">
	<div class="ball">
		<div class="inner">Ball</div>
	</div>
</div>
<div class="box box4">
	<div class="ball">
		<div class="inner">Ball</div>
	</div>
</div>
<h3 id="demo3">演示3</h3>
<div class="box box5">
<div class="ball">Ball</div>
</div>
</body>
</html>
效果图：
猜你喜欢
