【聊代码】第八十二集 css样式（之五十二）自旋转的八个小图呈圆形排列|老小孩讲述

海特行者的个人主页注册

【原创】【聊代码】第八十二集 css样式（之五十二）自旋转的八个小图呈圆形排列

字体调整：大 | 中 | 小

发表于2022-09-16- 20时 阅读 8192 评论0 点赞14

聊代码（第八十二集）css样式（之五十二）

我们在这几集都讨论各种不同样式的旋转。本集，制作一个八幅小图在背景图的圆周上进行自转的动画，这和上两集介绍的旋转不同，小图是围绕着自己的圆心旋转的，故曰“自转”。

多图在同一圆周上，必然要求均匀分布。在圆周上有八个图，自然就要有八个座标点。本集，我主要说的就是如何确定座标。

拿出一张纸，画个圆，并在圆周上标八个点（为了我说得明白，请将这八个点都标上名字，按照时钟位置，依次将12点、3点、6点、9点处分别标为大写的A、B、C、D，再将1、2点、4、5点、7、8点、10、11点之间处分别标为小写的a、b、c、d）。假定圆的直径为400（我推荐这个值，过大过小均不宜），x轴为圆的上端切线，y轴为圆的左侧切线（请注意，我在此处违背常理，把y轴原点以下定为正数，因为 top 的值是越往下越大）。

从这个图以及点的布局看，无须解释，A点的座标是（200,0），B点的座标是（400,200），C点的座标是（200,400），D点的座标是（0,200）。对于a、b、c、d 点的座标确定，我要多说几句了。可不是取中间值啊！例如：如果把 a 点的座标定为（300,100）， b 点的座标定为（300,300）， c 点的座标定为（100,300）, d 点的座标定为（100,100），这四个点就不在圆周上了，与 A、B、C、D 点形成的是矩形轨迹，这当然不是我们所需要的。稍有一点几何知识的人都能很直观的看出，它们的座标应该是 a（350,50），b（350,350），c（50,350），d（50,50）。

座标值确定之后，就可以用到代码当中了，八个小图围成了一个圆。这个圆在页面上十有八九位置不当。而且，它与背景图也不吻合。无论是背景图还是八个小图，都需要重新定位。首先是把背景图定位好，然后再定位八个小图。给八个小图定位意味着要修改它们的座标，分两步：第一步先修改横座标（即 left 的值），八个小图的 left 值要加减同一个数。横向定位好之后，进行第二步，修改纵座标（即 top 的值），当然也是八个小图的 top 值要加减同一个数啦！修改座标，谁先谁后均可。

八幅小图在背景图的圆周上自转效果。

代码：

＜div align="center"＞
＜style type="text/css"＞.背景图片{
position: relative;top: 20px; left: 0px;
margin: 0 auto;
border-radius: 50%;
background-image:url(http://img2.oldkids.cn/upload/2017/10/04/blog_20171004143206529.gif);
width: 460px; height: 460px;
}
.旋转图 img{
position: absolute;
width: 180px; height: 180px;
transform-origin:50% 50%;
animation: 转 6s linear infinite;
}
@keyframes 转{
0%{transform:rotate(0deg);}
100%{transform:rotate(-360deg);}
}
.wheelpicfour {top:-50px; left:150px;}
.wheelpicseven{top:0px; left:300px;}
.wheelpictwo{top:150px; left:350px;}
.wheelpicsix{top:300px; left:300px;}
.wheelpicone{ top:350px; left:150px; }
.wheelpicfive{ top:300px; left:0px; }
.wheelpicthree{ top:150px; left:-50px; }
.wheelpiceight{ top:0px; left:0px;
}
＜/style＞
＜div class="背景图片"＞
＜div class="旋转图"＞＜img class="wheelpicone"
src="http://www.oldkids.cn/upload/2018/09/25/blog_20180925095850770.png" / ＞＜img class="wheelpictwo" src="http://www.oldkids.cn/upload/2018/09/25/blog_20180925095850770.png" /＞＜img class="wheelpicthree" src="http://www.oldkids.cn/upload/2018/09/25/blog_20180925095850770.png" /＞＜img class="wheelpicfour" src="http://www.oldkids.cn/upload/2018/09/25/blog_20180925095850770.png" /＞＜img class="wheelpicfive" src="http://www.oldkids.cn/upload/2018/09/25/blog_20180925095850770.png" /＞＜img class="wheelpicsix" src="http://www.oldkids.cn/upload/2018/09/25/blog_20180925095850770.png" /＞＜img class="wheelpicseven" src="http://www.oldkids.cn/upload/2018/09/25/blog_20180925095850770.png" /＞＜img class="wheelpiceight" src="http://www.oldkids.cn/upload/2018/09/25/blog_20180925095850770.png" /＞
＜/div＞
＜/div＞