CSS3碰撞效果是現(xiàn)代網(wǎng)頁設(shè)計中常用的一種動畫效果，它可以讓元素之間產(chǎn)生碰撞效果，讓網(wǎng)頁看起來更加生動有趣。

下面是一個簡單的CSS3碰撞效果的示例代碼：

/* 設(shè)置元素的起始位置 */
#element1 {
position: absolute;
top: 0;
left: 0;
background-color: red;
width: 50px;
height: 50px;
}
#element2 {
position: absolute;
top: 50px;
left: 60px;
background-color: blue;
width: 50px;
height: 50px;
}
/* 定義動畫 */
@keyframes collision {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100px);
}
}
/* 設(shè)置碰撞效果 */
#element1 {
animation: collision 2s ease-in-out infinite alternate;
}
#element2 {
animation: collision 2s ease-in-out 1s infinite alternate;
}

在上面的代碼中，我們使用了CSS3動畫的關(guān)鍵幀（@keyframes）來定義碰撞效果的動畫。我們定義了兩個物體（element1和element2），并在它們的起始位置上設(shè)置了相應(yīng)的樣式。

接下來，在CSS文件中我們定義了一個名為collision的@keyframes動畫，它的起始位置是0%，終止位置是100%。我們使用translateX來控制元素的水平位置。當(dāng)我們播放動畫時，元素將從translateX(0)開始向右移動，直到translateX(100px)時停止，然后再返回到起始位置。

最后，我們將碰撞效果應(yīng)用到兩個元素上，使用animation屬性，指定動畫名稱為collision，持續(xù)時間為2秒，動畫函數(shù)為ease-in-out。其中，element2比element1晚1秒啟動動畫，這樣才能產(chǎn)生碰撞效果。

CSS3碰撞效果可以讓網(wǎng)頁看起來更加生動有趣，同時也是提高用戶體驗的重要手段。使用CSS3動畫來實現(xiàn)這種效果非常簡單，只需要定義好動畫關(guān)鍵幀和動畫屬性即可。