在CSS3中，我們可以使用動畫屬性來制作一些比較生動有趣的效果。本文我們將制作一位可愛的小姑娘蕩秋千的動畫。

首先，我們需要布局頁面。以下是HTML代碼：

<div class="swing">
<div class="girl"></div>
<div class="rope"></div>
</div>

其中，swing為秋千容器，girl為小姑娘容器，rope為秋千繩子容器。

接下來，我們需要為小姑娘和繩子設(shè)置樣式。以下是CSS代碼：

.girl {
width: 80px;
height: 100px;
background-color: #FFC0CB;
border-radius: 40px 40px 0 0;
position: absolute;
top: 50px;
left: 50px;
animation: swing 2s infinite;
transform-origin: top center;
z-index: 2;
}
.rope {
width: 4px;
height: 200px;
background-color: #8B4513;
position: absolute;
top: 40px;
left: 85px;
z-index: 1;
}
@keyframes swing {
0% {
transform: rotate(3deg);
}
50% {
transform: rotate(-3deg);
}
100% {
transform: rotate(3deg);
}
}

我們?yōu)間irl設(shè)置了圓角以及背景顏色，并將其放置在了秋千的左側(cè)。同時，我們?yōu)間irl添加了swing動畫屬性，并通過transform-origin將其綁定在上部中央。為繩子設(shè)置高度、寬度、顏色，并綁定在秋千容器上方。最后，我們定義swing動畫使其在平衡點旋轉(zhuǎn)。

下面是完整的CSS代碼：

.swing {
width: 320px;
height: 240px;
position: relative;
margin: 50px auto;
}
.girl {
width: 80px;
height: 100px;
background-color: #FFC0CB;
border-radius: 40px 40px 0 0;
position: absolute;
top: 50px;
left: 50px;
animation: swing 2s infinite;
transform-origin: top center;
z-index: 2;
}
.rope {
width: 4px;
height: 200px;
background-color: #8B4513;
position: absolute;
top: 40px;
left: 85px;
z-index: 1;
}
@keyframes swing {
0% {
transform: rotate(3deg);
}
50% {
transform: rotate(-3deg);
}
100% {
transform: rotate(3deg);
}
}

通過以上代碼，我們已經(jīng)實現(xiàn)了一個可愛的小姑娘蕩秋千的動畫效果。