<!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>
效果图如下所示：
扫一扫
4805
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
