您的位置：首页 > Web前端 > CSS

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

2015-08-07 14:36 656 查看

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

效果图如下所示：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： CSS3

相关文章推荐

新的分享

章节导航