CSS無縫拼接主要是為了讓網(wǎng)頁能夠流暢、自然地過渡。而無縫拼接能夠體現(xiàn)在很多地方，比如背景圖、圖庫、旋轉(zhuǎn)木馬等等。其中最常見的應(yīng)該就是在背景圖上實(shí)現(xiàn)，下面將通過一個(gè)實(shí)例來介紹CSS無縫拼接的實(shí)現(xiàn)原理。

/*HTML代碼*/
<div class="bg"></div>
/*CSS代碼*/
.bg {
width: 800px;  /*圖片寬度*/
height: 600px; /*圖片高度*/
background-image: url("image.jpg"); /*背景圖*/
position: relative; /*設(shè)置為相對(duì)定位*/
}
/*偽類繼承，將圖片克隆一份放在圖片的右側(cè)*/
.bg::after {
content:"";
width: 800px;
height: 600px;
background-image: url("image.jpg");
position: absolute; /*設(shè)置為絕對(duì)定位*/
left: 800px; /*放在右側(cè)*/
}
/*循環(huán)播放，實(shí)現(xiàn)無縫拼接*/
@keyframes seamless {
0% {
left: 0;
}
100% {
left: -800px; /*向左移入圖片*/
}
}
.bg {
animation: seamless 10s linear infinite;
}

通過上述代碼，我們就可以實(shí)現(xiàn)CSS無縫拼接的效果了。具體實(shí)現(xiàn)的原理是，利用CSS3動(dòng)畫中的無縫播放屬性，將兩個(gè)完全相同的背景圖片疊在一起，再重復(fù)播放其中一個(gè)的動(dòng)畫，使得此時(shí)疊在一起的背景圖片可以自然地平滑過渡，從而達(dá)到無縫拼接的效果。