CSS3實(shí)現(xiàn)左滑刪除消息的步驟如下：

.left-slide {
position: relative;
overflow: hidden;
}
.left-slide .delete-btn {
position: absolute;
top: 0;
right: -100px;
width: 100px;
height: 100%;
background-color: red;
color: #fff;
font-size: 20px;
text-align: center;
line-height: 50px;
transform: translateX(100px);
transition: all .5s ease-out;
}
.left-slide .content {
position: relative;
z-index: 10;
padding-right: 100px;
}
.left-slide:hover .delete-btn {
transform: translateX(0);
}
.left-slide:hover .content {
background-color: #f2f2f2;
}

使用以上代碼，我們可以實(shí)現(xiàn)一個(gè)左滑刪除消息的效果。首先我們給消息的外層容器設(shè)置了相對(duì)定位和隱藏溢出，然后給刪除按鈕設(shè)置了絕對(duì)定位，并位于消息容器的右側(cè)。使用translateX將其移出屏幕外。給刪除按鈕設(shè)置了過(guò)渡效果，當(dāng)鼠標(biāo)懸停在消息容器上時(shí)，執(zhí)行translateX(0)將刪除按鈕移入屏幕內(nèi)。同時(shí)，也可以通過(guò)給內(nèi)容區(qū)域添加背景色實(shí)現(xiàn)鼠標(biāo)懸停時(shí)的效果。