您的位置：首页 > 其它

小圆围绕大圆360度旋转的2种方法

2017-04-15 17:52 169 查看
第一种 ：覆盖法

1. ul包含7个li，每个li包含图片和含小圆的span；

2. li、img、div、span都给border-radius:50%，img（图片）的大小要小于li；

3. span（小圆）由一个div包住，div覆盖（定位）到li上面去，div的大小和li大小一样;

4. 给每个li和span定位；

5. div旋转360度，小圆就旋转360度；

















HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>face</title>
</head>
<body>
<ul>
<li class="image1">
<img src="imgs/1.jpg" alt="" />
<div><span></span></div>
</li>
<li class="image2">
<img src="imgs/2.jpg" alt="" />
<div><span></span></div>
</li>
<li class="image3">
<img src="imgs/3.jpg" alt="" />
<div><span></span></div>
</li>
<li class="image4">
<img src="imgs/4.jpg" alt="" />
<div><span></span></div>
</li>
<li class="image5">
<img src="imgs/5.jpg" alt="" />
<div><span></span></div>
</li>
<li class="image6">
<img src="imgs/6.jpg" alt="" />
<div><span></span></div>
</li>
</ul>
</body>
</html>


css

<style type="text/css">
/*基本设置*/
html, body, div, ul, li{
margin: 0;
padding: 0;
list-style: none;
}

ul{
width: 600px;
height: 600px;
background: #2a2a2a;
position: relative;
margin: 0 auto;
}

1469a
li{
width: 70px;
height: 70px;
border: 1px solid #ff4346;
border-radius:70px;
padding: 15px;
position: relative;
}

img{
width: 70px;
height: 70px;
border: 1px solid transparent;
border-radius:70px;
}
/*给每个图片定位*/
li.image1{
position: absolute;
left:30px;
top: 80px;
}

li.image2{
position: absolute;
left:265px;
top: 80px;
}

li.image3{
position: absolute;
right:30px;
top: 80px;
}

li.image4{
position: absolute;
left:135px;
top: 265px;
}

li.image5{
position: absolute;
right:135px;
top: 265px;
}

li.image6{
position: absolute;
left:265px;
bottom: 30px;
}

span{
display: block;
width: 10px;
height: 10px;
border-radius: 10px;
}
/*小圆给一个div包住，div覆盖到li上面去，div的大小和li大小一样，div旋转360度就是小圆围绕脸谱转360*/
li div{
width: 100px;
height: 100px;
border-radius: 100px;
position: absolute;
left:0;
top: 0;
}

li div{
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transition: transform 10s;
animation: circle 10s infinite linear;
-webkit-animation:circle 10s infinite linear;
-moz-animation:circle 10s infinite linear;
}

@keyframes circle{
0%{ transform:rotate(0deg); }
100%{transform:rotate(360deg);}
}

@-webkit-keyframes circle{
0%{ transform:rotate(0deg) ; }
100%{transform:rotate(360deg);}
}

@-moz-keyframes circle{
0%{ transform:rotate(0deg) ; }
100%{transform:rotate(360deg);}
}
/*给每个小圆定位*/
.image1 span{
background: #c11ced;
position: absolute;
left: 18px;
top:2px;
}

.image2 span{
background: #FF4346;
position: absolute;
right: 18px;
bottom: 2px;
}

.image3 span{
background: #18ed58;
position: absolute;
left: 18px;
bottom: 3px;
}

.image4 span{
background: #0352cc;
position: absolute;
left: 40px;
bottom: -4px;
}

.image5 span{
background: #d90fb2;
position: absolute;
left: -5px;
bottom: 53px;
}

.image6 span{
background: #dff757;
position: absolute;
left: 67px;
bottom: 0px;
}
</style>


第二种方法：改变小圆的旋转起点transform-origin

1. ul包含7个li，每个li包含图片和含小圆的span；

2. li、img、div、span都给border-radius:50%，img（图片）的大小要小于li；

3. 给每个li和span定位；

4. 改变span（小圆）的旋转起点transform-origin，使其位置刚好；

5. div旋转360度，小圆就旋转360度；

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>face</title>
</head>
<body>
<ul>
<li class="image1">
<img src="imgs/1.jpg" alt="" />
<span></span>
</li>
<li class="image2">
<img src="imgs/2.jpg" alt="" />
<span></span>
</li>
<li class="image3">
<img src="imgs/3.jpg" alt="" />
<span></span>
</li>
<li class="image4">
<img src="imgs/4.jpg" alt="" />
<span></span>
</li>
<li class="image5">
<img src="imgs/5.jpg" alt="" />
<span></span>
</li>
<li class="image6">
<img src="imgs/6.jpg" alt="" />
<span></span>
</li>
</ul>
</body>
</html>


CSS

<style type="text/css">
html, body, div, ul, li{
margin: 0;
padding: 0;
list-style: none;
}

ul{
width: 600px;
height: 600px;
background: #2a2a2a;
position: relative;
margin: 0 auto;
}

li{
width: 70px;
height: 70px;
border: 1px solid #ff4346;
border-radius:70px;
padding: 15px;
position: relative;
}

img{
width: 70px;
height: 70px;
border: 1px solid transparent;
border-radius:70px;
}

li.image1{
position: absolute;
left:30px;
top: 80px;
}

li.image2{
position: absolute;
left:265px;
top: 80px;
}

li.image3{
position: absolute;
right:30px;
top: 80px;
}

li.image4{
position: absolute;
left:135px;
top: 265px;
}

li.image5{
position: absolute;
right:135px;
top: 265px;
}

li.image6{
position: absolute;
left:265px;
bottom: 30px;
}

span{
display: block;
width: 10px;
height: 10px;
border-radius: 10px;
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transition: transform 10s;
animation: circle 10s infinite linear;
-webkit-animation:circle 10s infinite linear;
-moz-animation:circle 10s infinite linear;
}

@keyframes circle{
0%{ transform:rotate(0deg); }
100%{transform:rotate(360deg);}
}

@-webkit-keyframes circle{
0%{ transform:rotate(0deg) ; }
100%{transform:rotate(360deg);}
}

@-moz-keyframes circle{
0%{ transform:rotate(0deg) ; }
100%{transform:rotate(360deg);}
}

.image1 span{
background: #c11ced;
position: absolute;
left: 18px;
top:2px;
transform-origin: 32px 48px;
}

.image2 span{
background: #FF4346;
position: absolute;
right: 18px;
bottom: 2px;
transform-origin: -22px -38px;
}

.image3 span{
background: #18ed58;
position: absolute;
left: 18px;
bottom: 3px;
transform-origin: 32px -38px;
}

.image4 span{
background: #0352cc;
position: absolute;
left: 40px;
bottom: -4px;
transform-origin: 10px -46px;
}

.image5 span{
background: #d90fb2;
position: absolute;
left: -5px;
bottom: 53px;
transform-origin: 55px 12px;
}

.image6 span{
background: #dff757;
position: absolute;
left: 67px;
bottom: 0px;
transform-origin: -17px -40px;
}
</style>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航