CSS3拉燈動畫可以為網頁添加更多的藝術氣息和動感元素，讓網頁顯得更加生動活潑。下面我們來看一下如何使用CSS3編寫一個簡單的拉燈動畫

/*定義拉燈的樣式*/
.ladan{
width: 20px;
height: 150px;
background-color: #de4747;
position: relative;
border-radius: 10px;
}
/*定義拉燈上面的小球*/
.ladan:before{
content: "";
width: 20px;
height: 20px;
background-color: #f2f2f2;
position: absolute;
top: -10px;
left: 0;
border-radius: 50%;
}
/*定義拉燈下面的小球*/
.ladan:after{
content: "";
width: 20px;
height: 20px;
background-color: #f2f2f2;
position: absolute;
bottom: -10px;
left: 0;
border-radius: 50%;
}
/*定義拉燈動畫*/
@keyframes rotating {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(10deg);
}
100% {
transform: rotate(0deg);
}
}
/*應用動畫效果*/
.ladan:hover:before {
animation: rotating 1s infinite linear;
}
.ladan:hover:after {
animation: rotating 1s infinite linear;
}

在代碼中，我們定義了拉燈的樣式，包括拉燈的形狀、顏色、大小、位置等等。然后定義拉燈上下方的小球，使拉燈看上去更加圓潤美觀。

接著，我們使用CSS3的關鍵幀動畫定義了一個名為rotating的動畫，使拉燈在鼠標移動到上面時呈現旋轉的效果。

最后，在拉燈的:before和:after偽類上應用動畫效果，使拉燈整體都能旋轉起來，實現拉燈動態效果。

通過這個例子的學習，相信大家可以更好地掌握CSS3的動畫編寫技巧，為自己的網頁設計添加更多魅力和動感元素。