css无缝拼接 |html css js源代码

/*HTML代码*/
<div class="bg"></div>
/*CSS代码*/
.bg {
width: 800px;  /*图片宽度*/
height: 600px; /*图片高度*/
background-image: url("image.jpg"); /*背景图*/
position: relative; /*设置为相对定位*/
}
/*伪类继承，将图片克隆一份放在图片的右侧*/
.bg::after {
content:"";
width: 800px;
height: 600px;
background-image: url("image.jpg");
position: absolute; /*设置为绝对定位*/
left: 800px; /*放在右侧*/
}
/*循环播放，实现无缝拼接*/
@keyframes seamless {
0% {
left: 0;
}
100% {
left: -800px; /*向左移入图片*/
}
}
.bg {
animation: seamless 10s linear infinite;
}

通过上述代码，大家就可以实现CSS无缝拼接的效果了。具体实现的原理是，利用CSS3动画中的无缝播放属性，将两个完全相同的背景图片叠在一起，再重复播放其中一个的动画，使得此时叠在一起的背景图片可以自然地平滑过渡，从而达到无缝拼接的效果。