晃動是一種常見的視覺效果，通常使用CSS實現。通過在父容器上設置晃動效果，可以在容器中的子元素上呈現晃動的效果。晃動效果可以通過設置晃動幅度、晃動時間和晃動方式來實現。

下面是一個使用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 實現晃動效果，可以創建出許多有趣的交互效果。只需簡單地調整晃動元素的樣式，就可以實現各種不同的晃動效果。