纯CSS模拟钟摆运动
本帖最后由 马黑黑 于 2022-1-28 11:44 编辑实现思路：一个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秒一个运动周期，循环往复，永动机一样永不停止。谁说没有永动机？
我的图图肿么做的辣么粗糙{:5_106:} 代码组织一下：
<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>
那个玫瑰花是摆动点在下面，这个摆锤是在上面，这下两种方式就都知道了{:4_187:} 循环往复，永动机一样永不停止。谁说没有永动机？
哈哈，太有道理了{:4_173:} <style type="text/css">
.mhBox {
margin: 10px auto;
width: 2px;
height: 200px;
background: gold;
position: relative;
transform: rotate(-25deg);
transform-origin: 0 0;
animation: zhongbai 2s linear infinite alternate;
}
.mhBox::after {
content: "";
position: absolute;
width: 60px;
height: 60px;
background: olive;
border-radius: 50%;
left: -29px;
top: 200px;
}
@keyframes zhongbai { 100% { transform: rotate(25deg); } }
</style>
<div class="mhBox"></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 动画，同名了{:5_106:}
把现在的动画名称改一下就不会影响灯笼了 红影 发表于 2022-1-28 11:31
原来是swing名称和灯笼冲突了，改了这个总算没事了。
你发现的还挺快的，厉害厉害{:4_187:} 红影 发表于 2022-1-28 11:26
.mhBox {
margin: 10px auto;
width: 2px;
这个示例的重点是运动圆心坐标的设定，理解了它，以后设计动画就不会盲目。
示例还有诸多技巧，如：动画设置给原始元素，它会带动伪元素一同运动；元素和伪元素的形状与具体定位；动画的偷懒设计（100%也可以用 to，把起始运动状态 0% 或 from 都省略了 ）；还有动画之前原始角度的设定也给动画设计带来了便利。 马黑黑 发表于 2022-1-28 11:29
关键是根据需要来。
transform-origin 是 rotate 的圆形。在这个钟摆示例里，摆柄的顶部是圆心，它不 ...
也就是找到圆心是要紧的，无论是走圆周还是走圆弧都是绕着圆心的。{:4_173:} 红影 发表于 2022-1-28 12:09
也就是找到圆心是要紧的，无论是走圆周还是走圆弧都是绕着圆心的。
宇宙运动都是需要圆心的 马黑黑 发表于 2022-1-28 11:33
你发现的还挺快的，厉害厉害
因为我经常干在同一个帖子里同名然后相互影响的蠢事，久病成良医了{:4_173:} 红影 发表于 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 ...
原来可以省略这么多的中间位置的设定，这个厉害的{:4_199:} 马黑黑 发表于 2022-1-28 12:46
其实也就是骑自行车找到感觉了
哈哈，摔得少点了呗{:4_189:}