CSS是網頁設計中非常重要的一部分，通過一定的CSS技巧，可以實現許多炫酷的效果，比如今天要介紹的鈴鐺擺動效果。

首先，在HTML中添加一個div元素，為其添加一個class，比如“bell”：

<div class="bell"></div>

接著，設置這個div元素的基本樣式，包括寬高、顏色、邊框等屬性。然后，為此元素添加一個偽元素，用于實現鈴鐺的蒂部，其中border-radius屬性用于設置圓角：

.bell {
width: 80px;
height: 80px;
border: 5px solid #999;
border-radius: 50%;
position: relative;
margin: 100px auto;
}
.bell::before {
content: "";
width: 10px;
height: 30px;
background-color: #999;
position: absolute;
left: 50%;
bottom: -30px;
transform: translateX(-50%);
border-radius: 5px 5px 0 0;
}

現在，我們需要用CSS動畫來實現鈴鐺的擺動效果，具體方法是通過@keyframes規則創建一個動畫，然后為目標元素添加animation屬性，并指定動畫名稱、持續時間、循環次數等參數：

@keyframes swing {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(20deg);
}
100% {
transform: rotate(0deg);
}
}
.bell {
animation: swing 2s infinite;
}

這段代碼的含義是，在動畫持續周期的0%和100%之間，鈴鐺不擺動；在50%時，鈴鐺向右擺動20度。其中，2s為動畫持續時間，infinite為循環次數。

這就是CSS實現鈴鐺擺動效果的方法，可以通過修改CSS代碼的細節和調整動畫參數，實現不同形態的鈴鐺效果。