CSS3 拖動動畫可以讓網站更加生動有趣，用戶體驗也會更好，下面就讓我們來看一看如何實現拖動動畫。

/*HTML結構*/
<div id="box" draggable="true">
<p>拖動我試試吧</p>
</div>
/*CSS樣式*/
#box{
width: 200px;
height: 200px;
background-color: #ccc;
border-radius: 10px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
cursor: move; /*光標變成小手*/
}
p{
text-align: center;
line-height: 200px;
}
/*拖動效果*/
#box:active{
opacity: 0.5; /*設置透明度*/
}

上述代碼中，我們先定義了一個 div 容器，并將它的 draggable 屬性設置為 true，這樣就可以拖動了。接著，我們設置了該容器的一些基本樣式，包括它的寬高，背景顏色等等，然后使用了 transform 屬性將它定位到頁面中心。

接著，我們為 div 容器中的 p 元素設置了一些樣式，讓它垂直、水平居中。最后，我們給 div 容器設置了一個 :active 偽類，表示當鼠標點擊時執行，這里我們設置了容器透明度變為 0.5 的效果，讓拖動效果更加明顯。

以上就是一個簡單的 CSS3 拖動動畫實現，可以根據自己的需要來擴展效果。