马黑黑 发表于 2022-2-26 22:18

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

本帖最后由 马黑黑 于 2022-2-26 22:19 编辑 <br /><br /><style>

#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 {
        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;
}

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

</style>

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

马黑黑 发表于 2022-2-26 22:20

完整代码：

<style>

#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 {
        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;
}

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

</style>

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


马黑黑 发表于 2022-2-26 22:42

一些说明：

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度，因为小球有运行半径，所以它不是在原地转动，而是绕着轨道旋转。

红影 发表于 2022-2-26 22:49

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

红影 发表于 2022-2-26 22:51

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

马黑黑 发表于 2022-2-26 22:53

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

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

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

马黑黑 发表于 2022-2-26 22:54

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

{:5_106:}

红影 发表于 2022-2-26 23:07

<style>

#circleBox1 {
      margin: auto;
      margin-top: 100px;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background: tomato;
      padding: 10px;
      position: relative;
}

#circleBox1::before, #circleBox1::after {
                content: "";
                position: absolute;
}

#circleBox1::before {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background: #ddd;
}

#circleBox1::after {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: darkgreen;
      top: 0px;
      transform-origin: 50px 50px;
      animation: cRt 5s linear infinite;
}

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

</style>

<div id="circleBox1"></div>

红影 发表于 2022-2-26 23:25

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

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

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

红影 发表于 2022-2-26 23:39

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

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

来学习

马黑黑 发表于 2022-2-27 08:21

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

学费是一串麻辣香肠{:5_117:}

马黑黑 发表于 2022-2-27 08:23

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

你这句话是关键：

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

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

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

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

可以的可以的

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

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

{:5_108:}

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

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


{:4_190:}

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

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


谢茶

红影 发表于 2022-2-27 19:17

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

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


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

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

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

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

加林森 发表于 2022-2-27 19:31

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

不客气
页: [1] 2
查看完整版本: CSS：小球在圆圈轨道上运动