本文主要是介绍小圆围绕大圆360度旋转的2种方法，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
第一种 ：覆盖法
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;}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>这篇关于小圆围绕大圆360度旋转的2种方法的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
