纯CSS实现一张背景图片的无缝自动向上滚动

• 首先了解一下 CSS3 @keyframes 规则
• html
• css
• 引入

首先了解一下 CSS3 @keyframes 规则

不了解 css3 动画的请点击下方
参考文档： @keyframes.
animation .

使用background-position 背景图片定位实现。

html

<div class="bag">
<div id="imgBgc">
<p>此文本是与图片分离的</p>
</div>
</div>

css

// An highlighted block
@-webkit-keyframes scrollToUp {
0% {
background-position: 0 0;
}
100% {
background-position: 0 -258px;  // 向上滚动则就是图片的高度的负值，否则为图片的宽度，也可以百分比
}
}
@keyframes scrollToUp {
0% {
background-position: 0 0;
}
100% {
background-position: 0 -258px;
}
}

引入

#imgBgc{
height: 1000px;
background-image: url("./../assets/bac.svg"); /* 什么图片都可以*/
background-attachment: fixed; /* 让背景图片和文本脱离*/
background-position: center center;
-webkit-animation: scrollToUp 5s linear infinite; /* 引入 scrollToUp动画 */
animation: scrollToUp 5s linear infinite;
}

效果

效果图是gif图所以看着会有跳动感。实际运行出来无任何跳动感