下面是一个使用CSS实现晃动效果的示例代码：
“`html
<div class=”晃动”>
<div class=”晃动-inner”></div>
</div>
“`css
.晃动 {
position: relative;
width: 200px;
height: 200px;
.晃动-inner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: blue;
animation：晃动 2s infinite;
@keyframes晃动 {
0% {
transform: translateY(0);
50% {
transform: translateY(100px);
100% {
transform: translateY(0);
在这个示例中，父容器设置了一个名为“晃动”的类，并定义了一个名为“晃动-inner”的子元素。子元素使用了 absolute 定位，并将其背景色设置为蓝色，以便在晃动过程中可以看到它的变化。
通过在父容器上设置一个动画，可以实现晃动效果。在动画中，使用了一个名为“晃动”的 CSS 类，定义了多种晃动幅度、晃动时间和晃动方式。晃动幅度是指晃动程度的大小，晃动时间是指晃动持续的时间，而晃动方式是指晃动的工作方式，例如线性、圆形或椭圆形等。
通过在容器中设置多个子元素，可以实现多个晃动效果。例如，可以在容器中设置多个圆形晃动效果，或多个线性晃动效果等。
使用 CSS 实现晃动效果，可以创建出许多有趣的交互效果。只需简单地调整晃动元素的样式，就可以实现各种不同的晃动效果。