在HTML中，我們可以通過CSS和JavaScript來制作各種各樣的動畫效果。下面我們來看一下如何制作一個燈籠搖擺的動畫。

/* CSS代碼 */
.lantern {
width: 100px;
height: 120px;
background-color: red;
border-radius: 50% 50% 0 0;
position: relative;
animation: swing 2s ease-in-out infinite;
}
.handle {
width: 10px;
height: 40px;
background-color: yellow;
position: absolute;
top: -40px;
left: 45px;
}
.flame {
width: 20px;
height: 20px;
background-color: orange;
position: absolute;
top: -30px;
left: 45px;
border-radius: 50%;
animation: flicker 1s ease-in-out infinite;
}
@keyframes swing {
0% {
transform: rotateZ(0deg);
}
50% {
transform: rotateZ(15deg);
}
100% {
transform: rotateZ(0deg);
}
}
@keyframes flicker {
0% {
opacity: 1;
}
50% {
opacity: 0.8;
}
100% {
opacity: 1;
}
}

首先，我們定義一個燈籠的樣式lantern，使用了背景色、圓角等屬性。接著使用position:relative定義相對定位，通過動畫屬性的設置，讓燈籠不斷地搖擺。

燈籠的手柄使用handle樣式定義，并使用了絕對定位來脫離文檔流。火光使用flame樣式定義，并使用圓形邊界半徑，讓它看起來更自然。同時通過動畫屬性，讓燭火閃爍。

最后，我們使用@keyframes來定義動畫。通過定義不同關鍵幀的狀態，讓元素在不同的時間點上呈現不同的效果。在該例子中，我們定義了swing動畫和flicker動畫。

通過上述代碼，我們就能制作出一個燈籠搖擺的動畫效果了。快來試試吧！