這是一款非常有創(chuàng)意的HTML網(wǎng)頁(yè)DOM元素拖拽彈性反彈和變形動(dòng)畫特效。這個(gè)特效中有兩種效果：第一種是彈性模態(tài)窗口效果，第二種是彈性幻燈片效果。這兩種效果均可以拖拽DOM元素，然后釋放它們時(shí)生成非常震撼的彈性搖擺特效。

在第一種彈性模態(tài)窗口中，用戶可以通過(guò)按鈕打開一個(gè)模態(tài)窗口。這個(gè)模態(tài)窗口可以用鼠標(biāo)進(jìn)行拖拽，拖拽時(shí)模態(tài)窗口會(huì)根據(jù)鼠標(biāo)的位置發(fā)生變形。如果用戶在瀏覽器窗口內(nèi)釋放鼠標(biāo)，模態(tài)對(duì)話框會(huì)非常有彈性的反彈會(huì)原來(lái)的位置，并且對(duì)話框中的內(nèi)容也會(huì)跟著做彈性搖擺運(yùn)動(dòng)。如果將模態(tài)窗口拖動(dòng)到瀏覽器窗口之外，模態(tài)窗口將被關(guān)閉。效果非常的震撼。

在第二種彈性幻燈片效果中，用戶可以拖動(dòng)幻燈片圖片。每一個(gè)幻燈片的SLIDE在被拖動(dòng)時(shí)都會(huì)根據(jù)鼠標(biāo)位置來(lái)發(fā)生變形動(dòng)畫。同樣如果用戶在瀏覽器窗口內(nèi)釋放鼠標(biāo)，幻燈片圖片會(huì)彈性反彈會(huì)原來(lái)的位置。如果將圖片拖動(dòng)到窗口之外，則幻燈片切換到下一張圖片。

該特效中使用了較多的新的CSS3特性，請(qǐng)使用最新版的信貸瀏覽器來(lái)觀看效果。另外，由于IE11瀏覽器不支持transform-style: preserve-3d和CSS過(guò)濾器，所以在IE11瀏覽器中部分效果是不可見的。

下面是該特效的一些截圖效果：

總結(jié)

以上是生活随笔為你收集整理的jquery回弹_创意网页DOM元素拖拽弹性反弹和变形动画特效的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。