CSS3 拖動(dòng)動(dòng)畫可以讓網(wǎng)站更加生動(dòng)有趣，用戶體驗(yàn)也會更好，下面就讓我們來看一看如何實(shí)現(xiàn)拖動(dòng)動(dòng)畫。

/*HTML結(jié)構(gòu)*/
<div id="box" draggable="true">
<p>拖動(dòng)我試試吧</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; /*光標(biāo)變成小手*/
}
p{
text-align: center;
line-height: 200px;
}
/*拖動(dòng)效果*/
#box:active{
opacity: 0.5; /*設(shè)置透明度*/
}

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

接著，我們?yōu)?div 容器中的 p 元素設(shè)置了一些樣式，讓它垂直、水平居中。最后，我們給 div 容器設(shè)置了一個(gè) :active 偽類，表示當(dāng)鼠標(biāo)點(diǎn)擊時(shí)執(zhí)行，這里我們設(shè)置了容器透明度變?yōu)?0.5 的效果，讓拖動(dòng)效果更加明顯。

以上就是一個(gè)簡單的 CSS3 拖動(dòng)動(dòng)畫實(shí)現(xiàn)，可以根據(jù)自己的需要來擴(kuò)展效果。