在网页制作中，CSS是非常重要的一部分，可以用来控制网页的样式和布局，实现各种各样的效果。今天我们就来探讨一下如何使用CSS控制页面元素不停地摇摆。

/* 创建一个动画 keyframe，其中定义了元素的两个状态 */
@keyframes shake {
0% {
transform: translateX(0);
}
100% {
transform: translateX(20px);
}
}
/* 将动画应用到具体元素上 */
.element {
animation: shake .5s ease-in-out infinite alternate;
}

在上面的代码中，我们首先通过@keyframes创建了一个名为“shake”的动画。在这个动画中，我们定义了元素两个状态：0%状态下，元素不进行任何变化；100%状态下，元素水平方向上移动了20像素。这样一来，动画就会不停地在这两个状态之间变化。

接下来，我们将动画应用到具体的元素上。通过animation属性，我们将刚刚定义的“shake”动画应用到名为“element”的元素上。这里的.5s表示动画持续时间为0.5秒，ease-in-out表示动画速度为先慢后快再慢，infinite表示动画循环播放无限次，alternate表示动画在每次循环时反向播放。

这样一来，我们就成功地实现了CSS控制元素摇摆的效果。当然，如果希望元素摇摆的幅度更大，只需要将translateX的值调大即可。而如果希望元素不仅水平方向上摇摆，还带有旋转等效果，可以通过transform属性的其他属性值来实现。