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

最新推荐文章于 2025-03-22 14:00:07 发布

zwf193071

最新推荐文章于 2025-03-22 14:00:07 发布

阅读量5.9k

点赞数 2

分类专栏： CSS3 文章标签： CSS3

本文链接：https://blog.youkuaiyun.com/zwf193071/article/details/47339003

版权

CSS3 专栏收录该内容

8 篇文章

订阅专栏

<!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>

效果图如下所示：