CSS3多张图片围绕圆圈做缓慢转动

<!DOCTYPE HTML>
<html>
<head>
	<meta charset='UTF-8'>
	<style type="text/css">
		.circle{position: absolute; top: 50%; left: 50%; margin-top: -150px; margin-left: -150px; width: 300px; height: 300px; border: 1px solid #333; border-radius: 50%;}
		.circle .c-circle{
			width: 100%;
  			height: 100%;
  			border-radius: 100%;
  			position: absolute;
  			transform-origin: center center;
  			animation: circle 300s linear infinite;
		}
		.circle .c-circle:after{
			content: '';
			position: absolute;
			transform: translate(-50%, -50%);
	  		border-radius: 100%;
		}
		.circle .first:after{	  		
	  		width: 80px;
	  		height: 80px;	  		
	  		left: 40px;
	  		top: 250px;
	  		background: url(../img/1.jpg) no-repeat;
	  		background-size: cover;	  		
		}
		.circle .second:after{
	  		width: 50px;
	  		height: 50px;
	  		left: 40px;
	  		top: 50px;
	  		background: url(../img/2.jpg) no-repeat;
	  		background-size: cover;
		}
		.circle .third:after{
	  		width: 80px;
	  		height: 80px;
	  		left: 250px;
	  		top: 50px;
	  		background: url(../img/3.jpg) no-repeat;
	  		background-size: cover;
		}
		.circle .four:after{
	  		width: 60px;
	  		height: 60px;
	  		left: 255px;
	  		top: 250px;
	  		background: url(../img/4.jpg) no-repeat;
	  		background-size: cover;
		}

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

<body>	
	<div class="circle">
		<div class="c-circle first"></div>
		<div class="c-circle second"></div>
		<div class="c-circle third"></div>
		<div class="c-circle four"></div>
	</div>
</body>
</html>
效果图如下所示:
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值