CSS：小球在圆圈轨道上运动

马黑黑

马黑黑

完整代码：

1. <style>
   
2. 
   
3. #circleBox {
   
4.         margin: auto;
   
5.         margin-top: 100px;
   
6.         width: 100px;
   
7.         height: 100px;
   
8.         border-radius: 50%;
   
9.         background: tomato;
   
10.         padding: 10px;
    
11.         position: relative;
    
12. }
    
13. 
    
14. #circleBox::before, #circleBox::after {
    
15.                 content: "";
    
16.                 position: absolute;
    
17. }
    
18. 
    
19. #circleBox::before {
    
20.         width: 100px;
    
21.         height: 100px;
    
22.         border-radius: 50%;
    
23.         background: #ddd;
    
24. }
    
25. 
    
26. #circleBox::after {
    
27.         width: 10px;
    
28.         height: 10px;
    
29.         border-radius: 50%;
    
30.         background: darkgreen;
    
31.         top: 23px;
    
32.         transform-origin: 50px 37px;
    
33.         animation: cRt 5s linear infinite;
    
34. }
    
35. 
    
36. @keyframes cRt {
    
37.         to { transform: rotate(360deg); }
    
38. }
    
39. 
    
40. </style>
    
41. 
    
42. <div id="circleBox"></div>
    

复制代码

马黑黑

一些说明：

HTML代码很简单，就一行：

<div id="circleBox"></div>

CSS代码是一个元素带两个伪元素：

一、元素代码

#circleBox {
        margin: auto; /* 居中 */
        margin-top: 100px; /* 上方留点空间 */
        width: 100px; /* 宽度 */
        height: 100px; /* 高度 */
        border-radius: 50%; /* 圆形外观 */
        background: tomato; /* 背景色 */
        padding: 10px; /* 内边距 ：作用是模拟轨道 */
        position: relative; /* 相对定位 ：必须 */
}


二、伪元素共性代码：

#circleBox::before, #circleBox::after {
                content: ""; /* 必须 ：伪元素能显示的依赖 */
                position: absolute; /* 绝对定位 ：必须 */
}


三、遮罩层伪元素代码：

#circleBox::before {
/* 高宽与父盒子一致，父盒子有padding值，padding部分不会被遮罩 */
        width: 100px; /* 宽度 */
        height: 100px; /* 高度 */
        border-radius: 50%;
        background: #ddd; /* 背景色 */
}


四、小球伪元素代码：

#circleBox::after {
        width: 10px; /* 宽度 */
        height: 10px; /* 高度 */
        border-radius: 50%;
        background: darkgreen;
        top: 23px; /* 移位令其进入轨道 */
        transform-origin: 50px 37px; /* 运行半径 ：根据移位计算 */
        animation: cRt 5s linear infinite; /* 运行动画 */
}


这一部分，如果不移位，则运行半径应当为 50px 50px，则小球处在轨道的外边缘，不能进入轨道，故而适当移位。移位的方法很多，处于简洁，仅移了垂直方向的位置，如此，运行半径就比较好掌握，仅变化y轴的值。

五、动画代码：

@keyframes cRt {
        to { transform: rotate(360deg); }
}


动画部分非常简单，就是转转360度，因为小球有运行半径，所以它不是在原地转动，而是绕着轨道旋转。

红影

没看懂，为什么父容器和伪元素都是100，没相互覆盖，而是有个边。
为什么小球是10，top却设置23。

红影

没注意到  padding: 10px; 呵呵，第一个问题不存在了

马黑黑

红影 发表于 2022-2-26 22:49
没看懂，为什么父容器和伪元素都是100，没相互覆盖，而是有个边。
为什么小球是10，top却设置23。

第一个问题，我在解释里有说明的：padding不会被相同尺寸的子元素所遮罩。

第二个问题：因为父窗体是圆的，根据圆周和三角函数计算得出 23 的垂直推进才能将小球放入轨道。

马黑黑

红影 发表于 2022-2-26 22:51
MEI HUYI DAO  padding: 10px; 呵呵，第一个问题不存在了

红影

红影

马黑黑 发表于 2022-2-26 22:53
第一个问题，我在解释里有说明的：padding不会被相同尺寸的子元素所遮罩。

第二个问题：因为父窗体是 ...

关于三角函数不太好理解，和圆心连线上的位移，也应该是直线，不明白为什么涉及函数运算。
试了一下50 50的圆心 ，若不设top，小球在上面不是在外围。
总觉得要往下移Y值应该变大啊，怎么会变小的。
还有，23+37是60，为什么X用50,的半径，Y用到60
我可能理解错了ransform-origin: 一直以为是圆心的定位，实际这个是半径？
嗯，实际问题可能还是在半径上，我不知道小球的运转半径怎么来的。

红影

哦哦，想起来了，起算点是100 100的左上顶点，不是中心位置，怪不得要用到三角函数。

加林森

来学习

马黑黑

加林森 发表于 2022-2-26 23:46
来学习

学费是一串麻辣香肠

马黑黑

红影 发表于 2022-2-26 23:25
关于三角函数不太好理解，和圆心连线上的位移，也应该是直线，不明白为什么涉及函数运算。
试了一下50 5 ...

你这句话是关键：

还有，23+37是60，为什么X用50,的半径，Y用到60

小球直径为10，60-10 = 50

加林森

马黑黑 发表于 2022-2-27 08:21
学费是一串麻辣香肠

可以的可以的

马黑黑

加林森 发表于 2022-2-27 11:11
可以的可以的

加林森

马黑黑 发表于 2022-2-27 13:19

马黑黑

加林森 发表于 2022-2-27 16:17

谢茶

红影

马黑黑 发表于 2022-2-27 08:23
你这句话是关键：

还有，23+37是60，为什么X用50,的半径，Y用到60

其实对这个还是迷糊的，用CAD去画了外围的110的圆，在45度方向的外侧加个10的小圆，然后试着内移动并硅酸到Y轴，得到的数据不是23 ，好吧，我貌似彻底迷糊了。

马黑黑

红影 发表于 2022-2-27 19:17
其实对这个还是迷糊的，用CAD去画了外围的110的圆，在45度方向的外侧加个10的小圆，然后试着内移动并硅酸 ...

你试试120的外圆看看，padding值为10，直径应加到20

加林森

马黑黑 发表于 2022-2-27 19:03
谢茶

不客气