纯CSS模拟钟摆运动

马黑黑

实现思路：一个div做钟摆的柄，用它的一个伪元素做摆锤。整体旋转-25度，做动画是再旋转25度。

现在，先做摆柄：

.iBox {
        margin: 10px auto;
        width: 2px;
        height: 200px;
        background: gold;
        position: relative;
        transform: rotate(-25deg);
        transform-origin: 0 0;
}


2*200得到一个细长的柄，还是金黄色的，土豪柄。相对位置必须哈，为它的伪元素限定了活动区域。旋转-25deg、运动圆心要在这里设定，它的伪元素会跟着它的步伐，继承的吧；运动圆心坐标为{0，0}，就是 iBox 的左上角，等下看到形状了就能理解。

接着伪元素做成一个球球当摆锤：

.iBox::after {
        content: "";
        position: absolute;
        width: 60px;
        height: 60px;
        background: olive;
        border-radius: 50%;
        left: -29px;
        top: 200px;
}


绝对定位必须的，60*60容易做圆球，注意定位，左移-30px可以的，考虑到柄是2px的，-29px可能更好；top呢，移动一个柄的长度，就到了底端。看整体效果：

现在，就缺少动画了：

@keyframes swing {
    100% { transform: rotate(25deg); }
}

动画名称是 swing，我们要在 iBox 的最后一行加入 animation 语句来播放这个 swin 动画：

.iBox {
        margin: 10px auto;
        width: 2px;
        height: 200px;
        background: gold;
        position: relative;
        transform: rotate(-25deg);
        transform-origin: 0 0;
       animation: swing 2s linear infinite alternate;
}



这个2秒一个运动周期，循环往复，永动机一样永不停止。谁说没有永动机？

马黑黑

我的图图肿么做的辣么粗糙

马黑黑

代码组织一下：

<style type="text/css">
.iBox {
        margin: 10px auto;
        width: 2px;
        height: 200px;
        background: gold;
        position: relative;
        transform: rotate(-25deg);
        transform-origin: 0 0;
        animation: swing 2s linear infinite alternate;
}
.iBox::after {
        content: "";
        position: absolute;
        width: 60px;
        height: 60px;
        background: olive;
        border-radius: 50%;
        left: -29px;
        top: 200px;
}
@keyframes swing { 100% { transform: rotate(25deg); } }
</style>

<div class="iBox"></div>

红影

那个玫瑰花是摆动点在下面，这个摆锤是在上面，这下两种方式就都知道了

红影

循环往复，永动机一样永不停止。谁说没有永动机？

哈哈，太有道理了

红影

红影

不对劲，为什么这个代码发出来就会影响到灯笼了，我修改了文件名还是影响论坛挂的灯笼，太奇怪了

马黑黑

红影 发表于 2022-1-28 11:24
那个玫瑰花是摆动点在下面，这个摆锤是在上面，这下两种方式就都知道了

关键是根据需要来。

transform-origin 是 rotate 的圆形。在这个钟摆示例里，摆柄的顶部是圆心，它不能动，所以设在 iBox 窗体的 0px 0px 处；如果他转360度，那这个摆要往上面走，柄顶位置不变。

玫瑰的柄底在 box 底部约 20%处，所以圆形 x 坐标是 20%，y坐标好像是 100%

红影

原来是swing名称和灯笼冲突了，改了这个总算没事了。

马黑黑

红影 发表于 2022-1-28 11:28
不对劲，为什么这个代码发出来就会影响到灯笼了，我修改了文件名还是影响论坛挂的灯笼，太奇怪了

这个很简单的：灯笼也设置了一个 swing 动画，同名了

把现在的动画名称改一下就不会影响灯笼了

马黑黑

红影 发表于 2022-1-28 11:31
原来是swing名称和灯笼冲突了，改了这个总算没事了。

你发现的还挺快的，厉害厉害

马黑黑

红影 发表于 2022-1-28 11:26
.mhBox {
        margin: 10px auto;
        width: 2px;

这个示例的重点是运动圆心坐标的设定，理解了它，以后设计动画就不会盲目。

示例还有诸多技巧，如：动画设置给原始元素，它会带动伪元素一同运动；元素和伪元素的形状与具体定位；动画的偷懒设计（100%也可以用 to，把起始运动状态 0% 或 from 都省略了 ）；还有动画之前原始角度的设定也给动画设计带来了便利。

红影

马黑黑 发表于 2022-1-28 11:29
关键是根据需要来。

transform-origin 是 rotate 的圆形。在这个钟摆示例里，摆柄的顶部是圆心，它不 ...

也就是找到圆心是要紧的，无论是走圆周还是走圆弧都是绕着圆心的。

马黑黑

红影 发表于 2022-1-28 12:09
也就是找到圆心是要紧的，无论是走圆周还是走圆弧都是绕着圆心的。

宇宙运动都是需要圆心的

红影

马黑黑 发表于 2022-1-28 11:33
你发现的还挺快的，厉害厉害

因为我经常干在同一个帖子里同名然后相互影响的蠢事，久病成良医了

马黑黑

红影 发表于 2022-1-28 12:44
因为我经常干在同一个帖子里同名然后相互影响的蠢事，久病成良医了

其实也就是骑自行车找到感觉了

红影

还是有很多不懂的，直线为什么要先设transform: rotate(-25deg);
小球下移200后，因为有25度的影响，顶端应该不在原位了，为什么不用考虑这个移位只考虑小球的半径和直线的线宽？

马黑黑

红影 发表于 2022-1-28 12:52
还是有很多不懂的，直线为什么要先设transform: rotate(-25deg);
小球下移200后，因为有25度的影响，顶端 ...

这是设计的巧妙之处，图中的样子就是 rotate(-25deg)的表现。接着，动画设计可以省事：transform: rotate(25deg)，也就是 100% 时是原始位置的相反。如果不这样，动画的设计要复杂一些：

0% { transform: 0; } /* 原始位置 */
25% { transform: -25deg;}
50% { transform: 0; }
75% { transform: 25deg; }
100% { transform: 0;}

红影

马黑黑 发表于 2022-1-28 13:59
这是设计的巧妙之处，图中的样子就是 rotate(-25deg)的表现。接着，动画设计可以省事：transform: rotate ...

原来可以省略这么多的中间位置的设定，这个厉害的

红影

马黑黑 发表于 2022-1-28 12:46
其实也就是骑自行车找到感觉了

哈哈，摔得少点了呗